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';
@@ -282,7 +283,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 && !isInvoiceReport && !shouldShowStatusBar;
     const bankAccountRoute = getBankAccountRoute(chatReport);
     const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(moneyRequestReport, shouldShowPayButton);
     const isAnyTransactionOnHold = hasHeldExpensesReportUtils(moneyRequestReport?.reportID);
@@ -890,7 +891,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,38 @@
+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>
+    );
+}
+
+MoneyReportHeaderStatusBarSkeleton.displayName = 'MoneyReportHeaderStatusBarSkeleton';
+
+export default MoneyReportHeaderStatusBarSkeleton;

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -54,6 +54,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';
 
 /**
@@ -553,6 +554,7 @@ function MoneyRequestReportActionsList({
                                     newTransactions={newTransactions}
                                     reportActions={reportActions}
                                     hasComments={reportHasComments}
+                                    isLoadingInitialReportActions={isLoadingInitialReportActions}
                                     scrollToNewTransaction={scrollToNewTransaction}
                                 />
                             </>
@@ -561,6 +563,7 @@ function MoneyRequestReportActionsList({
                         onScroll={trackVerticalScrolling}
                         contentContainerStyle={[shouldUseNarrowLayout ? styles.pt4 : styles.pt2]}
                         ref={reportScrollManager.ref}
+                        ListEmptyComponent={isLoadingInitialReportActions ? <ReportActionsListLoadingSkeleton /> : undefined} // This skeleton component is only used for loading state, the 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';
@@ -55,6 +56,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 */
+    isLoadingInitialReportActions?: boolean;
+
     /** scrollToNewTransaction callback used for scrolling to new transaction when it is created */
     scrollToNewTransaction: (offset: number) => void;
 };
@@ -97,7 +101,15 @@ const getTransactionKey = (transaction: OnyxTypes.Transaction, key: SortableColu
     return key === CONST.SEARCH.TABLE_COLUMNS.DATE ? dateKey : key;
 };
 
-function MoneyRequestReportTransactionList({report, transactions, newTransactions, reportActions, hasComments, scrollToNewTransaction}: MoneyRequestReportTransactionListProps) {
+function MoneyRequestReportTransactionList({
+    report,
+    transactions,
+    newTransactions,
+    reportActions,
+    hasComments,
+    isLoadingInitialReportActions: isLoadingReportActions,
+    scrollToNewTransaction,
+}: MoneyRequestReportTransactionListProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
@@ -292,7 +304,13 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction
                 </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={hasComments ? undefined : 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/ReportActionsListLoadingSkeleton.tsx

@@ -0,0 +1,18 @@
+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>
+    );
+}
+
+ReportActionsListLoadingSkeleton.displayName = 'ReportActionsListLoadingSkeleton';
+
+export default ReportActionsListLoadingSkeleton;

src/pages/home/ReportScreen.tsx

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