[Bug] tx.setCurrentLocal loading state [React Native]

[nazmeln]

Current Behavior
When I call tx.setCurrentLocal the UI freezes(button stays as pressed, please see the video recording) until the translations are fetched, also I can't get a proper loading state. The loading state returns true when doing console.log but the loader doesn't appear on the screen.

Expected Behavior
The UI doesn't freeze when the locale changes and the loading indicator value is displayed on the screen.

Steps to Reproduce

export const useTranslation = () => {
    const t: (key: string, replacements?: Record<string, string | number | undefined | null | JSX.Element>) => string =
        useT()
    const dispatch = useAppDispatch()

    const [isTranslationsLoading, setIsTranslationsLoading] = useState(false)

    const { showCommonErrorToast } = useToast()

    const changeLanguage = useCallback(
        async (locale: string) => {
            try {
                setIsTranslationsLoading(true)

                await tx.setCurrentLocale(locale)

                dispatch(addLocaleCode(locale))
            } catch (err) {
                showCommonErrorToast()
            } finally {
                setIsTranslationsLoading(false)
            }
        },
        [dispatch, showCommonErrorToast],
    )

    return {
        t,
        isTranslationsLoading,
        changeLanguage,
    }
}

const DemoComponent = () => {
    const { t, changeLanguage, isTranslationsLoading } = useTranslation()

   return (
       {isTranslationsLoading && <ActivityIndicator />}
            <Button title='Change locale' onPress={() => changeLanguage('en')} />
  )
}

Here's the demo

Screen.Recording.2024-04-12.at.18.57.06.mov