Make FullScreenLoadingIndicator recoverable on long loadings#73011
Merged
Valforte merged 10 commits intoExpensify:mainfrom Oct 28, 2025
Merged
Conversation
…n long loading occurs
mateuuszzzzz
changed the title
FullScreenLoadingIndicator recoverable on long loadings.FullScreenLoadingIndicator recoverable on long loadings
Contributor
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index a5b41007..8684f2a6 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -675,6 +675,7 @@ const translations = {
pinned: 'Angeheftet',
read: 'Gelesen',
copyToClipboard: 'In die Zwischenablage kopieren',
+ thisIsTakingLongerThanExpected: 'Das dauert länger als erwartet...',
},
supportalNoAccess: {
title: 'Nicht so schnell',
@@ -5384,8 +5385,8 @@ ${amount} für ${merchant} - ${date}`,
chooseReconciliationAccount: {
chooseBankAccount: 'Wählen Sie das Bankkonto, gegen das Ihre Expensify Card-Zahlungen abgeglichen werden sollen.',
accountMatches: 'Stellen Sie sicher, dass dieses Konto mit Ihrem übereinstimmt',
- settlementAccount: 'Expensify-Kartenabrechnungskonto',
- reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(endend mit ${lastFourPAN}), damit die kontinuierliche Abstimmung ordnungsgemäß funktioniert.`,
+ settlementAccount: 'Expensify Card-Abrechnungskonto',
+ reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(endet auf ${lastFourPAN}), damit Continuous Reconciliation ordnungsgemäß funktioniert.`,
},
},
export: {
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 1cecdc28..477a59cd 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -673,6 +673,7 @@ const translations = {
pinned: 'Épinglé',
read: 'Lu',
copyToClipboard: 'Copier dans le presse-papiers',
+ thisIsTakingLongerThanExpected: 'Cela prend plus de temps que prévu...',
},
supportalNoAccess: {
title: 'Pas si vite',
@@ -5393,8 +5394,8 @@ ${amount} pour ${merchant} - ${date}`,
chooseReconciliationAccount: {
chooseBankAccount: 'Choisissez le compte bancaire sur lequel les paiements de votre carte Expensify seront rapprochés.',
accountMatches: 'Assurez-vous que ce compte correspond à votre',
- settlementAccount: 'Compte de règlement de la carte Expensify',
- reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(terminant par ${lastFourPAN}) afin que la Réconciliation Continue fonctionne correctement.`,
+ settlementAccount: 'Compte de règlement pour Expensify Card',
+ reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(se terminant par ${lastFourPAN}) afin que le rapprochement continu fonctionne correctement.`, //_/\__/_/ \_,_/\__/\__/\_,_/
},
},
export: {
diff --git a/src/languages/it.ts b/src/languages/it.ts
index ba6e2402..1b32a9de 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -673,6 +673,7 @@ const translations = {
pinned: 'Fissato',
read: 'Letto',
copyToClipboard: 'Copia negli appunti',
+ thisIsTakingLongerThanExpected: 'Sta richiedendo più tempo del previsto...',
},
supportalNoAccess: {
title: 'Non così in fretta',
@@ -5394,8 +5395,8 @@ ${amount} per ${merchant} - ${date}`,
chooseReconciliationAccount: {
chooseBankAccount: 'Scegli il conto bancario su cui verranno riconciliati i pagamenti della tua carta Expensify.',
accountMatches: 'Assicurati che questo account corrisponda al tuo',
- settlementAccount: 'Conto di regolamento della carta Expensify',
- reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(termine con ${lastFourPAN}) affinché la Riconciliazione Continua funzioni correttamente.`,
+ settlementAccount: 'Conto di regolamento della Expensify Card',
+ reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(che termina con ${lastFourPAN}) in modo che la Riconciliazione Continua funzioni correttamente.`,
},
},
export: {
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 7ac21cd0..87d7e36e 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -673,6 +673,7 @@ const translations = {
pinned: '固定済み',
read: '既読',
copyToClipboard: 'クリップボードにコピー',
+ thisIsTakingLongerThanExpected: '予想より時間がかかっています...',
},
supportalNoAccess: {
title: 'ちょっと待ってください',
@@ -5347,9 +5348,9 @@ ${date} - ${merchant}に${amount}`,
`<muted-text-label>継続的な照合を有効にするため、${connectionName}の<a href="${accountingAdvancedSettingsLink}">自動同期</a>を有効にしてください。</muted-text-label>`,
chooseReconciliationAccount: {
chooseBankAccount: 'Expensifyカードの支払いを照合する銀行口座を選択してください。',
- accountMatches: 'このアカウントがあなたのものと一致していることを確認してください',
- settlementAccount: 'Expensifyカード決済口座',
- reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `（${lastFourPAN}で終わる）ため、継続的な調整が正しく機能します。`,
+ accountMatches: 'Make sure this account matches your',
+ settlementAccount: 'Expensify Card の決済口座',
+ reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `（末尾が${lastFourPAN}）で、Continuous Reconciliation が正しく機能します。`,
},
},
export: {
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index fbe5768c..90bc31d1 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -672,6 +672,7 @@ const translations = {
pinned: 'Vastgezet',
read: 'Gelezen',
copyToClipboard: 'Kopiëren naar klembord',
+ thisIsTakingLongerThanExpected: 'Dit duurt langer dan verwacht...',
},
supportalNoAccess: {
title: 'Niet zo snel',
@@ -5386,9 +5387,9 @@ ${amount} voor ${merchant} - ${date}`,
`<muted-text-label>Om continue afstemming mogelijk te maken, moet u <a href="${accountingAdvancedSettingsLink}">automatische synchronisatie</a> voor ${connectionName} inschakelen.</muted-text-label>`,
chooseReconciliationAccount: {
chooseBankAccount: 'Kies de bankrekening waarmee uw Expensify Card-betalingen worden verrekend.',
- accountMatches: 'Zorg ervoor dat dit account overeenkomt met uw',
- settlementAccount: 'Expensify Card afwikkelingsrekening',
- reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(eindigend op ${lastFourPAN}) zodat Continue Reconciliation goed werkt.`,
+ accountMatches: 'Zorg ervoor dat dit account overeenkomt met je',
+ settlementAccount: 'Expensify Card-verrekeningsrekening',
+ reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(eindigend op ${lastFourPAN}) zodat doorlopende afstemming naar behoren werkt.`,
},
},
export: {
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 7be518d8..ca209a9c 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -673,6 +673,7 @@ const translations = {
pinned: 'Przypięte',
read: 'Przeczytane',
copyToClipboard: 'Skopiuj do schowka',
+ thisIsTakingLongerThanExpected: 'To trwa dłużej niż oczekiwano...',
},
supportalNoAccess: {
title: 'Nie tak szybko',
@@ -5375,9 +5376,9 @@ ${amount} dla ${merchant} - ${date}`,
`<muted-text-label>Aby włączyć funkcję ciągłego uzgadniania, włącz <a href="${accountingAdvancedSettingsLink}">automatyczną synchronizację</a> dla ${connectionName}.</muted-text-label>`,
chooseReconciliationAccount: {
chooseBankAccount: 'Wybierz konto bankowe, z którym będą uzgadniane płatności kartą Expensify.',
- accountMatches: 'Upewnij się, że to konto pasuje do Twojego',
+ accountMatches: 'Upewnij się, że to konto pasuje do twojego',
settlementAccount: 'Konto rozliczeniowe karty Expensify',
- reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(kończący się na ${lastFourPAN}), aby Ciągła Rekonsyliacja działała poprawnie.`,
+ reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(kończący się na ${lastFourPAN}) aby ciągłe uzgadnianie działało prawidłowo.`,
},
},
export: {
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 32d38f76..461d0d4e 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -675,6 +675,7 @@ const translations = {
pinned: 'Fixado',
read: 'Lido',
copyToClipboard: 'Copiar para a área de transferência',
+ thisIsTakingLongerThanExpected: 'Isso está demorando mais do que o esperado...',
},
supportalNoAccess: {
title: 'Não tão rápido',
@@ -5377,9 +5378,9 @@ ${amount} para ${merchant} - ${date}`,
`<muted-text-label>Para ativar a reconciliação contínua, habilite a <a href="${accountingAdvancedSettingsLink}">sincronização automática</a> para o ${connectionName}.</muted-text-label>`,
chooseReconciliationAccount: {
chooseBankAccount: 'Escolha a conta bancária na qual os pagamentos do seu Expensify Card serão reconciliados.',
- accountMatches: 'Certifique-se de que esta conta corresponde à sua',
+ accountMatches: 'Certifique-se de que esta conta corresponda à sua',
settlementAccount: 'Conta de liquidação do Cartão Expensify',
- reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(terminando em ${lastFourPAN}) para que a Reconciliação Contínua funcione corretamente.`,
+ reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `(terminado em ${lastFourPAN}) para que a Reconciliação Contínua funcione corretamente.`,
},
},
export: {
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 2df5e8ba..e9e1d2d6 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -674,6 +674,7 @@ const translations = {
pinned: '已固定',
read: '已读',
copyToClipboard: '复制到剪贴板',
+ thisIsTakingLongerThanExpected: '这花的时间比预期更长...',
},
supportalNoAccess: {
title: '慢一点',
@@ -5286,9 +5287,9 @@ ${merchant}的${amount} - ${date}`,
`<muted-text-label>要启用持续对账，请启用 ${connectionName} 的<a href="${accountingAdvancedSettingsLink}">自动同步</a>功能。</muted-text-label>`,
chooseReconciliationAccount: {
chooseBankAccount: '选择用于对账您的 Expensify Card 支付的银行账户。',
- accountMatches: '确保此账户与您的账户匹配',
+ accountMatches: '请确保此账户与您的',
settlementAccount: 'Expensify Card 结算账户',
- reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `（以 ${lastFourPAN} 结尾）以便持续对账正常工作。`,
+ reconciliationWorks: ({lastFourPAN}: ReconciliationWorksParams) => `（以${lastFourPAN}结尾），以便持续对账功能正常运行。`,
},
},
export: {
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
Codecov Report❌ Patch coverage is
... and 143 files with indirect coverage changes 🚀 New features to boost your workflow:
|
Contributor
Author
|
One video for Android mWeb is missing, because API blocked me and I cannot sign-in. I will add it once I'm unblocked |
war-in
reviewed
Oct 22, 2025
Contributor
|
Visually this is looking great. cc @dannymcclain |
Contributor
|
One issue I've found is that when we navigate to the workspace page and the timer on the overview section appears, clicking 'go back' just reloads the current section: Screen.Recording.2025-10-23.at.14.37.06.mov |
Contributor
Author
That's strange. I used |
Contributor
|
Visually looking good to me too! |
|
Hey, I noticed you changed Please look at the code and make sure there are no malicious changes before running the workflow. If you have the K2 extension, you can simply click: [this button] |
Contributor
Author
@Ollyws this is fixed now 🎉 |
Contributor
Author
|
Jest unit tests have failed on the PR due to an out-of-memory error. I think more people have started experiencing this issue. Do we have a tracking issue for it? cc: @vitHoracek |
Contributor
Reviewer Checklist
Screenshots/VideosAndroid: HybridApp01_Android_Native.mp4Android: mWeb Chrome02_Android_Chrome.mp4iOS: HybridApp03_iOS_Native.mp4iOS: mWeb Safari04_iOS_Safari.mp4MacOS: Chrome / Safari05_MacOS_Chrome.mp4MacOS: Desktop06_MacOS_Desktop.mp4 |
Valforte
approved these changes
Oct 28, 2025
Contributor
Valforte
left a comment
Valforte
left a comment
There was a problem hiding this comment.
LGTM. Love this feature!
Julesssss
reviewed
Oct 28, 2025
Contributor
Julesssss
left a comment
Julesssss
left a comment
There was a problem hiding this comment.
Looks great! Lets just keep an eye out for any related issue
48 tasks
Contributor
|
🚀 Deployed to staging by https://github.com/Valforte in version: 9.2.40-0 🚀
|
Contributor
|
🚀 Deployed to staging by https://github.com/Valforte in version: 9.2.40-0 🚀
|
8 tasks
|
@mateuuszzzzz This PR is failing because of a regression issue #73771 bug.mp4 |
Contributor
Contributor
|
🚀 Deployed to production by https://github.com/lakchote in version: 9.2.40-1 🚀
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
10 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Explanation of Change
PR adds
Go backbutton that is displayed when long loading occurs to make such situations recoverable. Default threshold is 10 seconds.Fixed Issues
$ #69850
PROPOSAL:
Tests
Loading screen can be found e.g. in
Workspaces>Workspace> any section (e.g. Expensify Card or Workflows).Go backbutton appear.Offline tests
QA Steps
Same as tests.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Recoverable.loading.Android.mov
Android: mWeb Chrome
android.mweb.mov
iOS: Native
Recoverable.loading.iOS.mov
iOS: mWeb Safari
Recoverable.loading.iOS.web.mov
MacOS: Chrome / Safari
Recoverable.loading.web.safari.mov
MacOS: Desktop
Recoverable.loading.desktop.mov