Delay translation until the loading spinner appears

This commit is contained in:
DS Boyce
2026-03-03 12:57:15 -08:00
parent f39e449683
commit 2a141c641b
+45 -39
View File
@@ -194,49 +194,55 @@ export function Provider({children}: React.PropsWithChildren<unknown>) {
await googleTranslate(text, targetLangCode, sourceLangCode)
return
}
const translateAfterAnimation = async () => {
try {
const result = await attemptTranslation(
text,
targetLangCode,
sourceLangCode,
)
ax.metric('translate:result', {
method: 'on-device',
os: Platform.OS,
sourceLanguage: result.sourceLanguage,
targetLanguage: result.targetLanguage,
})
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
setTranslationState(prev => ({
...prev,
[key]: {
status: 'success',
translatedText: result.translatedText,
sourceLanguage: result.sourceLanguage,
targetLanguage: result.targetLanguage,
},
}))
} catch (e) {
logger.error('Failed to translate post on device', {safeMessage: e})
// On-device translation failed (language pack missing or user
// dismissed the download prompt). Fall back to Google Translate.
ax.metric('translate:result', {
method: 'fallback-alert',
os: Platform.OS,
sourceLanguage: sourceLangCode ?? null,
targetLanguage: targetLangCode,
})
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
setTranslationState(prev => ({
...prev,
[key]: {status: 'idle'},
}))
await googleTranslate(text, targetLangCode, sourceLangCode)
}
}
LayoutAnimation.configureNext(
LayoutAnimation.Presets.easeInEaseOut,
() => void translateAfterAnimation(),
)
setTranslationState(prev => ({
...prev,
[key]: {status: 'loading'},
}))
try {
const result = await attemptTranslation(
text,
targetLangCode,
sourceLangCode,
)
ax.metric('translate:result', {
method: 'on-device',
os: Platform.OS,
sourceLanguage: result.sourceLanguage,
targetLanguage: result.targetLanguage,
})
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
setTranslationState(prev => ({
...prev,
[key]: {
status: 'success',
translatedText: result.translatedText,
sourceLanguage: result.sourceLanguage,
targetLanguage: result.targetLanguage,
},
}))
} catch (e) {
logger.error('Failed to translate post on device', {safeMessage: e})
// On-device translation failed (language pack missing or user
// dismissed the download prompt). Fall back to Google Translate.
ax.metric('translate:result', {
method: 'fallback-alert',
os: Platform.OS,
sourceLanguage: sourceLangCode ?? null,
targetLanguage: targetLangCode,
})
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
setTranslationState(prev => ({
...prev,
[key]: {status: 'idle'},
}))
await googleTranslate(text, targetLangCode, sourceLangCode)
}
},
[ax, googleTranslate],
)