Delay translation until the loading spinner appears

src/lib/translation/index.tsx

@@ -194,10 +194,7 @@ export function Provider({children}: React.PropsWithChildren<unknown>) {
         await googleTranslate(text, targetLangCode, sourceLangCode)
         return
       }
-      setTranslationState(prev => ({
+      const translateAfterAnimation = async () => {
-        ...prev,
-        [key]: {status: 'loading'},
-      }))
         try {
           const result = await attemptTranslation(
             text,
@@ -237,6 +234,15 @@ export function Provider({children}: React.PropsWithChildren<unknown>) {
           }))
           await googleTranslate(text, targetLangCode, sourceLangCode)
         }
+      }
+      LayoutAnimation.configureNext(
+        LayoutAnimation.Presets.easeInEaseOut,
+        () => void translateAfterAnimation(),
+      )
+      setTranslationState(prev => ({
+        ...prev,
+        [key]: {status: 'loading'},
+      }))
     },
     [ax, googleTranslate],
   )