fix: show a "Refresh needed" empty state for stale search results

src/components/BlockingViews/FullPageErrorView.tsx

@@ -13,6 +13,12 @@ import {View} from 'react-native';
 import BlockingView from './BlockingView';
 import ForceFullScreenView from './ForceFullScreenView';
 
+/**
+ * Illustrations this view can show. Both are requested up front, because the lazy illustrations hook
+ * only seeds its asset map once per mount, so a name it wasn't given at mount resolves to PlaceholderIcon.
+ */
+type FullPageErrorViewIllustration = 'BrokenMagnifyingGlass' | 'FolderSync';
+
 type FullPageErrorViewProps = {
     testID?: string;
     children?: React.ReactNode;
@@ -38,6 +44,15 @@ type FullPageErrorViewProps = {
 
     /** Function to call when pressing the CTA button. The button only renders when this and `buttonTranslationKey` are both provided */
     onButtonPress?: () => void;
+
+    /** Illustration shown above the title */
+    illustration?: FullPageErrorViewIllustration;
+
+    /** Width of the illustration */
+    illustrationWidth?: number;
+
+    /** Height of the illustration */
+    illustrationHeight?: number;
 };
 
 function FullPageErrorView({
@@ -51,9 +66,12 @@ function FullPageErrorView({
     containerStyle,
     buttonTranslationKey,
     onButtonPress,
+    illustration = 'BrokenMagnifyingGlass',
+    illustrationWidth = variables.errorPageIconWidth,
+    illustrationHeight = variables.errorPageIconHeight,
 }: FullPageErrorViewProps) {
     const styles = useThemeStyles();
-    const illustrations = useMemoizedLazyIllustrations(['BrokenMagnifyingGlass']);
+    const illustrations = useMemoizedLazyIllustrations(['BrokenMagnifyingGlass', 'FolderSync']);
 
     if (shouldShow) {
         return (
@@ -63,9 +81,9 @@ function FullPageErrorView({
                     testID={testID}
                 >
                     <BlockingView
-                        icon={illustrations.BrokenMagnifyingGlass}
-                        iconWidth={variables.errorPageIconWidth}
-                        iconHeight={variables.errorPageIconHeight}
+                        icon={illustrations[illustration]}
+                        iconWidth={illustrationWidth}
+                        iconHeight={illustrationHeight}
                         title={title}
                         titleStyles={[styles.mt0, styles.mb2]}
                         subtitle={subtitle}

src/components/Icon/chunks/illustrations.chunk.ts

@@ -154,6 +154,7 @@ import FishbowlBlue from '@assets/images/simple-illustrations/simple-illustratio
 import Flag from '@assets/images/simple-illustrations/simple-illustration__flag.svg';
 import Flash from '@assets/images/simple-illustrations/simple-illustration__flash.svg';
 import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
+import FolderSync from '@assets/images/simple-illustrations/simple-illustration__foldersync.svg';
 import FoodTruck from '@assets/images/simple-illustrations/simple-illustration__foodtruck-tacos.svg';
 import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
 import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg';
@@ -351,6 +352,7 @@ const Illustrations = {
     CardIntoWallet,
     CreditCardsNew,
     FolderOpen,
+    FolderSync,
     HandCard,
     Hashtag,
     InvoiceBlue,

src/components/Search/index.tsx

@@ -71,6 +71,7 @@ import type {SearchFullscreenNavigatorParamList} from '@navigation/types';
 import EmptySearchView from '@pages/Search/EmptySearchView';
 
 import type {GetReportTableColumnStylesParams} from '@styles/utils';
+import variables from '@styles/variables';
 
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
@@ -1112,13 +1113,21 @@ function Search({
                     shouldShow
                     containerStyle={styles.searchBlockingErrorViewContainer}
                     subtitleStyle={styles.textSupporting}
-                    title={translate('errorPage.title', {
-                        isBreakLine: shouldUseNarrowLayout,
-                    })}
-                    subtitle={translate(isInvalidQuery ? 'errorPage.wrongTypeSubtitle' : 'errorPage.subtitle')}
-                    // Retrying an invalid query won't help, so the retry button is only offered for other errors.
+                    title={
+                        isInvalidQuery
+                            ? translate('errorPage.title', {
+                                  isBreakLine: shouldUseNarrowLayout,
+                              })
+                            : translate('search.searchResults.staleResults.title')
+                    }
+                    subtitle={translate(isInvalidQuery ? 'errorPage.wrongTypeSubtitle' : 'search.searchResults.staleResults.subtitle')}
+                    // A failed request leaves results that are out of date rather than broken, so that case gets the
+                    // refresh copy and illustration. An invalid query keeps the error copy, since it really did fail.
                     {...(!isInvalidQuery && {
-                        buttonTranslationKey: 'common.tryAgain',
+                        illustration: 'FolderSync',
+                        illustrationWidth: variables.iconSizeUltraLarge,
+                        illustrationHeight: variables.iconSizeUltraLarge,
+                        buttonTranslationKey: 'search.searchResults.staleResults.buttonText',
                         onButtonPress: () => {
                             // A response replaces the snapshot's results rather than appending to them, so retrying at
                             // the paginated offset would leave only that later page behind. Retry from the first page.

src/languages/de.ts

@@ -9541,6 +9541,7 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
                 title: 'Keine Ausgaben zum Genehmigen',
                 subtitle: 'Null Ausgaben. Maximale Entspannung. Gut gemacht!',
             },
+            staleResults: {title: 'Aktualisierung erforderlich', subtitle: 'Diese Seite ist veraltet, aktualisieren Sie sie, um die neuesten Inhalte zu sehen', buttonText: 'Aktualisieren'},
         },
         columns: 'Spalten',
         editColumns: 'Spalten bearbeiten',

src/languages/el.ts

@@ -9749,6 +9749,7 @@ ${reportName}`,
             emptyViolationSnapshotResults: {
                 subtitle: (formattedDate) => `Οι παραβάσεις παρακολουθούνται μόνο από ${formattedDate} και μετά. Δοκιμάστε να προσαρμόσετε τα φίλτρα ημερομηνίας σας.`,
             },
+            staleResults: {title: 'Απαιτείται ανανέωση', subtitle: 'Αυτή η σελίδα είναι παρωχημένη, κάντε ανανέωση για να δείτε τα πιο πρόσφατα', buttonText: 'Ανανέωση'},
         },
         columns: 'Στήλες',
         editColumns: 'Επεξεργασία στηλών',

src/languages/en.ts

@@ -9683,6 +9683,11 @@ const translations = {
                 title: 'No expenses to approve',
                 subtitle: 'Zero expenses. Maximum chill. Well done!',
             },
+            staleResults: {
+                title: 'Refresh needed',
+                subtitle: 'This page is out of date, refresh to see the latest',
+                buttonText: 'Refresh',
+            },
         },
         columns: 'Columns',
         editColumns: 'Edit columns',

src/languages/es.ts

@@ -9395,6 +9395,7 @@ ${reportName}`,
                 title: 'No hay gastos para aprobar',
                 subtitle: 'Cero gastos. Máxima relajación. ¡Bien hecho!',
             },
+            staleResults: {title: 'Es necesario actualizar', subtitle: 'Esta página está desactualizada, actualiza para ver lo más reciente', buttonText: 'Actualizar'},
         },
         columns: 'Columnas',
         editColumns: 'Editar columnas',

src/languages/fr.ts

@@ -9560,6 +9560,7 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
                 title: 'Aucune dépense à approuver',
                 subtitle: 'Zéro dépense. Détente maximale. Bien joué !',
             },
+            staleResults: {title: 'Actualisation requise', subtitle: 'Cette page n’est plus à jour, actualisez-la pour voir les dernières informations', buttonText: 'Actualiser'},
         },
         columns: 'Colonnes',
         editColumns: 'Modifier les colonnes',

src/languages/it.ts

@@ -9497,6 +9497,7 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
                 title: 'Nessuna spesa da approvare',
                 subtitle: 'Zero spese. Massimo relax. Ben fatto!',
             },
+            staleResults: {title: 'Aggiornamento necessario', subtitle: 'Questa pagina non è aggiornata, ricarica per vedere le ultime novità', buttonText: 'Aggiorna'},
         },
         columns: 'Colonne',
         editColumns: 'Modifica colonne',

src/languages/ja.ts

@@ -9370,6 +9370,7 @@ ${reportName}`,
                 title: '承認する経費はありません',
                 subtitle: '経費はゼロ。リラックス度マックス。お見事です！',
             },
+            staleResults: {title: '再読み込みが必要です', subtitle: 'このページは古くなっています。最新の情報を見るには再読み込みしてください。', buttonText: '更新'},
         },
         columns: '列',
         editColumns: '列の編集',

src/languages/nl.ts

@@ -9465,6 +9465,7 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
                 title: 'Geen declaraties om goed te keuren',
                 subtitle: 'Nul uitgaven. Maximale chill. Goed gedaan!',
             },
+            staleResults: {title: 'Vernieuwen nodig', subtitle: 'Deze pagina is verouderd, vernieuw om de laatste versie te zien', buttonText: 'Verversen'},
         },
         columns: 'Kolommen',
         editColumns: 'Kolommen bewerken',

src/languages/pl.ts

@@ -9481,6 +9481,7 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
                 title: 'Brak wydatków do zatwierdzenia',
                 subtitle: 'Zero wydatków. Maksymalny luz. Dobra robota!',
             },
+            staleResults: {title: 'Wymagane odświeżenie', subtitle: 'Ta strona jest nieaktualna, odśwież ją, żeby zobaczyć najnowszą wersję', buttonText: 'Odśwież'},
         },
         columns: 'Kolumny',
         editColumns: 'Edytuj kolumny',

src/languages/pt-BR.ts

@@ -9463,6 +9463,7 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
                 title: 'Nenhuma despesa para aprovar',
                 subtitle: 'Zero despesas. Máximo sossego. Muito bem!',
             },
+            staleResults: {title: 'É preciso atualizar', subtitle: 'Esta página está desatualizada, atualize para ver a versão mais recente', buttonText: 'Atualizar'},
         },
         columns: 'Colunas',
         editColumns: 'Editar colunas',

src/languages/zh-hans.ts

@@ -9118,6 +9118,7 @@ ${reportName}`,
                 title: '没有报销可审批',
                 subtitle: '零报销，最大轻松。干得好！',
             },
+            staleResults: {title: '需要刷新', subtitle: '此页面已过期，刷新以查看最新内容', buttonText: '刷新'},
         },
         columns: '列',
         editColumns: '编辑列',