Refactor table view report loading state

src/components/MoneyReportHeader.tsx

@@ -98,6 +98,7 @@ import type {PaymentMethod} from './KYCWall/types';
 import LoadingBar from './LoadingBar';
 import Modal from './Modal';
 import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
+import MoneyReportHeaderStatusBarSkeleton from './MoneyReportHeaderStatusBarSkeleton';
 import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import {useMoneyRequestReportContext} from './MoneyRequestReportView/MoneyRequestReportContext';
@@ -280,7 +281,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const isSubmitterSameAsNextApprover = isReportOwner(moneyRequestReport) && nextApproverAccountID === moneyRequestReport?.ownerAccountID;
     const optimisticNextStep = isSubmitterSameAsNextApprover && policy?.preventSelfApproval ? buildOptimisticNextStepForPreventSelfApprovalsEnabled() : nextStep;
 
-    const shouldShowNextStep = isFromPaidPolicy && !!optimisticNextStep?.message?.length && !shouldShowStatusBar;
+    const shouldShowNextStep = isFromPaidPolicy && !shouldShowStatusBar;
     const bankAccountRoute = getBankAccountRoute(chatReport);
     const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(moneyRequestReport, shouldShowPayButton);
     const isAnyTransactionOnHold = hasHeldExpensesReportUtils(moneyRequestReport?.reportID);
@@ -883,7 +884,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                             />
                         </View>
                     )}
-                    {shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={optimisticNextStep} />}
+                    {shouldShowNextStep && (optimisticNextStep?.message?.length ? <MoneyReportHeaderStatusBar nextStep={optimisticNextStep} /> : <MoneyReportHeaderStatusBarSkeleton />)}
                     {!!statusBarProps && (
                         <MoneyRequestHeaderStatusBar
                             icon={statusBarProps.icon}

src/components/MoneyReportHeaderStatusBarSkeleton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {View} from 'react-native';
+import {Rect} from 'react-native-svg';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import SkeletonViewContentLoader from './SkeletonViewContentLoader';
+
+function MoneyReportHeaderStatusBarSkeleton() {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    return (
+        <View style={[styles.dFlex, styles.flexRow, styles.overflowHidden, styles.w100, {height: 28}]}>
+            <SkeletonViewContentLoader
+                height={28}
+                backgroundColor={theme.skeletonLHNIn}
+                foregroundColor={theme.skeletonLHNOut}
+            >
+                <Rect
+                    x={0}
+                    y={12}
+                    width={16}
+                    height={8}
+                />
+                <Rect
+                    x={24}
+                    y={12}
+                    width={120}
+                    height={8}
+                />
+            </SkeletonViewContentLoader>
+        </View>
+    );
+}
+
+export default MoneyReportHeaderStatusBarSkeleton;

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -53,6 +53,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import {useMoneyRequestReportContext} from './MoneyRequestReportContext';
 import MoneyRequestReportTransactionList from './MoneyRequestReportTransactionList';
 import MoneyRequestViewReportFields from './MoneyRequestViewReportFields';
+import ReportActionsListLoadingSkeleton from './ReportActionsListLoadingSkeleton';
 import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyState';
 
 /**
@@ -82,6 +83,9 @@ type MoneyRequestReportListProps = {
 
     /** If the report has older actions to load */
     hasOlderActions: boolean;
+
+    /** If the report has older actions to load */
+    isLoadingReportActions?: boolean;
 };
 
 function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, parentReportActionID: string | undefined): OnyxEntry<OnyxTypes.ReportAction> {
@@ -91,7 +95,7 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
     return parentReportActions[parentReportActionID];
 }
 
-function MoneyRequestReportActionsList({report, policy, reportActions = [], transactions = [], hasNewerActions, hasOlderActions}: MoneyRequestReportListProps) {
+function MoneyRequestReportActionsList({report, policy, reportActions = [], transactions = [], hasNewerActions, hasOlderActions, isLoadingReportActions}: MoneyRequestReportListProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {preferredLocale} = useLocalize();
@@ -516,12 +520,14 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
                                     transactions={transactions}
                                     reportActions={reportActions}
                                     hasComments={reportHasComments}
+                                    isLoadingReportActions={isLoadingReportActions && !reportHasComments}
                                 />
                             </>
                         }
                         keyboardShouldPersistTaps="handled"
                         onScroll={trackVerticalScrolling}
                         ref={reportScrollManager.ref}
+                        ListEmptyComponent={isLoadingReportActions ? <ReportActionsListLoadingSkeleton /> : undefined} // this empty component is only used for loading state, real empty state is handled by SearchMoneyRequestReportEmptyState
                     />
                 )}
             </View>

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -2,6 +2,7 @@ import {useFocusEffect} from '@react-navigation/native';
 import isEmpty from 'lodash/isEmpty';
 import React, {memo, useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
 import type {TupleToUnion} from 'type-fest';
 import {getButtonRole} from '@components/Button/utils';
 import Checkbox from '@components/Checkbox';
@@ -52,6 +53,9 @@ type MoneyRequestReportTransactionListProps = {
 
     /** Whether the report that these transactions belong to has any chat comments */
     hasComments: boolean;
+
+    /** Whether the report actions are being loaded, used to show 'Comments' during loading state */
+    isLoadingReportActions?: boolean;
 };
 
 type TransactionWithOptionalHighlight = OnyxTypes.Transaction & {
@@ -81,7 +85,7 @@ const getTransactionKey = (transaction: OnyxTypes.Transaction, key: SortableColu
     return key === CONST.SEARCH.TABLE_COLUMNS.DATE ? dateKey : key;
 };
 
-function MoneyRequestReportTransactionList({report, transactions, reportActions, hasComments}: MoneyRequestReportTransactionListProps) {
+function MoneyRequestReportTransactionList({report, transactions, reportActions, hasComments, isLoadingReportActions}: MoneyRequestReportTransactionListProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
@@ -289,7 +293,13 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
                 </View>
             )}
             <View style={[styles.dFlex, styles.flexRow, listHorizontalPadding, styles.justifyContentBetween, styles.mb2]}>
-                <Text style={[styles.textLabelSupporting]}>{hasComments ? translate('common.comments') : ''}</Text>
+                <Animated.Text
+                    style={[styles.textLabelSupporting]}
+                    entering={FadeIn}
+                    exiting={FadeOut}
+                >
+                    {hasComments || isLoadingReportActions ? translate('common.comments') : ''}
+                </Animated.Text>
                 <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3]}>
                     <Text style={[styles.mr3, styles.textLabelSupporting]}>{translate('common.total')}</Text>
                     <Text style={[shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight, styles.textBold]}>

src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

@@ -212,6 +212,7 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
                             reportActions={reportActions}
                             hasOlderActions={hasOlderActions}
                             hasNewerActions={hasNewerActions}
+                            isLoadingReportActions={isLoadingInitialReportActions}
                         />
                     ) : (
                         <ReportActionsView

src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
+import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
+
+function ReportActionsListLoadingSkeleton() {
+    return (
+        <Animated.View
+            entering={FadeIn}
+            exiting={FadeOut}
+        >
+            <ReportActionsSkeletonView possibleVisibleContentItems={3} />
+        </Animated.View>
+    );
+}
+
+export default ReportActionsListLoadingSkeleton;

src/pages/home/ReportScreen.tsx

@@ -798,6 +798,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
                                         transactions={reportTransactions}
                                         hasOlderActions={hasOlderActions}
                                         hasNewerActions={hasNewerActions}
+                                        isLoadingReportActions={reportMetadata?.isLoadingInitialReportActions}
                                     />
                                 ) : null}
                                 {isCurrentReportLoadedFromOnyx ? (