add loading indicator

Expensify · Nov 8, 2024 · 8d2222f · 8d2222f
1 parent a321c54
commit 8d2222f
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 3 deletions.
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
@@ -29,9 +29,18 @@ type ActionCellProps = {
     goToItem: () => void;
     isChildListItem?: boolean;
     parentAction?: string;
+    isLoading?: boolean;
 };
 
-function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth = true, isSelected = false, goToItem, isChildListItem = false, parentAction = ''}: ActionCellProps) {
+function ActionCell({
+    action = CONST.SEARCH.ACTION_TYPES.VIEW,
+    isLargeScreenWidth = true,
+    isSelected = false,
+    goToItem,
+    isChildListItem = false,
+    parentAction = '',
+    isLoading = false,
+}: ActionCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -87,6 +96,7 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth
             small
             style={[styles.w100]}
             innerStyles={buttonInnerStyles}
+            isLoading={isLoading}
             success
         />
     );

diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -28,6 +28,7 @@ type ExpenseItemHeaderNarrowProps = {
     isDisabled?: boolean | null;
     isDisabledCheckbox?: boolean;
     handleCheckboxPress?: () => void;
+    isLoading?: boolean;
 };
 
 function ExpenseItemHeaderNarrow({
@@ -44,6 +45,7 @@ function ExpenseItemHeaderNarrow({
     isDisabled,
     handleCheckboxPress,
     text,
+    isLoading = false,
 }: ExpenseItemHeaderNarrowProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -102,6 +104,7 @@ function ExpenseItemHeaderNarrow({
                     goToItem={onButtonPress}
                     isLargeScreenWidth={false}
                     isSelected={isSelected}
+                    isLoading={isLoading}
                 />
             </View>
         </View>

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -202,6 +202,7 @@ function ReportListItem<TItem extends ListItem>({
                                 action={reportItem.action}
                                 goToItem={handleOnButtonPress}
                                 isSelected={item.isSelected}
+                                isLoading={reportItem.isActionLoading}
                             />
                         </View>
                     )}

diff --git a/src/components/SelectionList/Search/TransactionListItem.tsx b/src/components/SelectionList/Search/TransactionListItem.tsx
@@ -85,6 +85,7 @@ function TransactionListItem<TItem extends ListItem>({
                 canSelectMultiple={!!canSelectMultiple}
                 isButtonSelected={item.isSelected}
                 shouldShowTransactionCheckbox={false}
+                isLoading={false}
             />
         </BaseListItem>
     );

diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -59,6 +59,7 @@ type TransactionListItemRowProps = {
     isButtonSelected?: boolean;
     parentAction?: string;
     shouldShowTransactionCheckbox?: boolean;
+    isLoading?: boolean;
 };
 
 const getTypeIcon = (type?: SearchTransactionType) => {
@@ -257,6 +258,7 @@ function TransactionListItemRow({
     isButtonSelected = false,
     parentAction = '',
     shouldShowTransactionCheckbox,
+    isLoading = false,
 }: TransactionListItemRowProps) {
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
@@ -445,6 +447,7 @@ function TransactionListItemRow({
                         isChildListItem={isChildListItem}
                         parentAction={parentAction}
                         goToItem={onButtonPress}
+                        isLoading={isLoading}
                     />
                 </View>
             </View>

diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts
@@ -15,7 +15,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import FILTER_KEYS from '@src/types/form/SearchAdvancedFiltersForm';
 import type {LastPaymentMethod} from '@src/types/onyx';
-import type {SearchTransaction} from '@src/types/onyx/SearchResults';
+import type {SearchReport, SearchTransaction} from '@src/types/onyx/SearchResults';
 import * as Report from './Report';
 
 let currentUserEmail: string;
@@ -189,7 +189,18 @@ function holdMoneyRequestOnSearch(hash: number, transactionIDList: string[], com
 }
 
 function approveMoneyRequestOnSearch(hash: number, reportIDList: string[]) {
-    const {optimisticData, finallyData} = getOnyxLoadingData(hash);
+    const createOnyxLoadingData = (isLoading: boolean): OnyxUpdate[] => [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
+            value: {
+                data: Object.fromEntries(reportIDList.map((reportID) => [`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {isActionLoading: isLoading}])) as Partial<SearchReport>,
+            },
+        },
+    ];
+
+    const optimisticData: OnyxUpdate[] = createOnyxLoadingData(true);
+    const finallyData: OnyxUpdate[] = createOnyxLoadingData(false);
 
     API.write(WRITE_COMMANDS.APPROVE_MONEY_REQUEST_ON_SEARCH, {hash, reportIDList}, {optimisticData, finallyData});
 }

diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
@@ -146,6 +146,9 @@ type SearchReport = {
     /** Whether the report is archived */
     // eslint-disable-next-line @typescript-eslint/naming-convention
     private_isArchived?: string;
+
+    /** Whether the action is loading */
+    isActionLoading?: boolean;
 };
 
 /** Model of report action search result */