From 19f893ee0dc5e389306bd803589c498f4e2532af Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Tue, 20 May 2025 12:48:01 +0200 Subject: [PATCH 1/6] refactor loading state logic in ReportScreen --- src/components/MoneyReportHeader.tsx | 5 +-- .../MoneyReportHeaderStatusBarSkeleton.tsx | 36 +++++++++++++++++++ .../MoneyRequestReportActionsList.tsx | 8 ++++- .../MoneyRequestReportTransactionList.tsx | 14 ++++++-- .../ReportActionsListLoadingSkeleton.tsx | 16 +++++++++ src/pages/home/ReportScreen.tsx | 1 + 6 files changed, 75 insertions(+), 5 deletions(-) create mode 100644 src/components/MoneyReportHeaderStatusBarSkeleton.tsx create mode 100644 src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index c681897c4a57..07b012f48f71 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/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 /> )} - {shouldShowNextStep && } + {shouldShowNextStep && (optimisticNextStep?.message?.length ? : )} {!!statusBarProps && ( + + + + + + ); +} + +export default MoneyReportHeaderStatusBarSkeleton; diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index cd2846451d8a..ab6d62b8bab3 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/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, parentReportActionID: string | undefined): OnyxEntry { @@ -91,7 +95,7 @@ function getParentReportAction(parentReportActions: OnyxEntry } keyboardShouldPersistTaps="handled" onScroll={trackVerticalScrolling} ref={reportScrollManager.ref} + ListEmptyComponent={isLoadingReportActions ? : undefined} // this empty component is only used for loading state, real empty state is handled by SearchMoneyRequestReportEmptyState /> )} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 9bf9b1886cb0..dd4ae9b21aca 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/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, )} - {hasComments ? translate('common.comments') : ''} + + {hasComments || isLoadingReportActions ? translate('common.comments') : ''} + {translate('common.total')} diff --git a/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx b/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx new file mode 100644 index 000000000000..1c2b50a6c9ba --- /dev/null +++ b/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 ( + + + + ); +} + +export default ReportActionsListLoadingSkeleton; diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 0b058a18dd52..5aaaea5d8402 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -803,6 +803,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) { transactions={reportTransactions} hasOlderActions={hasOlderActions} hasNewerActions={hasNewerActions} + isLoadingReportActions={reportMetadata?.isLoadingInitialReportActions} /> ) : null} {isCurrentReportLoadedFromOnyx ? ( From 510227193ee12e2cc57c0cadd4297819b6d3bad3 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Tue, 20 May 2025 13:13:08 +0200 Subject: [PATCH 2/6] add loading report actions logic to MoneyRequestReportView --- src/components/MoneyRequestReportView/MoneyRequestReportView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx index 8c4e1d452ea8..c32cc1c2855d 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx @@ -211,6 +211,7 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe reportActions={reportActions} hasOlderActions={hasOlderActions} hasNewerActions={hasNewerActions} + isLoadingReportActions={isLoadingInitialReportActions} /> ) : ( Date: Wed, 21 May 2025 13:42:36 +0200 Subject: [PATCH 3/6] fix PR comments --- src/components/MoneyReportHeader.tsx | 2 +- .../MoneyRequestReportView/MoneyRequestReportActionsList.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index d5a2749d45d9..0bd5c119e1cb 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -281,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 && !shouldShowStatusBar; + const shouldShowNextStep = isFromPaidPolicy && !isInvoiceReport && !shouldShowStatusBar; const bankAccountRoute = getBankAccountRoute(chatReport); const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(moneyRequestReport, shouldShowPayButton); const isAnyTransactionOnHold = hasHeldExpensesReportUtils(moneyRequestReport?.reportID); diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index ab6d62b8bab3..ec1e79a5bcd7 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -520,14 +520,14 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran transactions={transactions} reportActions={reportActions} hasComments={reportHasComments} - isLoadingReportActions={isLoadingReportActions && !reportHasComments} + isLoadingReportActions={isLoadingReportActions} /> } keyboardShouldPersistTaps="handled" onScroll={trackVerticalScrolling} ref={reportScrollManager.ref} - ListEmptyComponent={isLoadingReportActions ? : undefined} // this empty component is only used for loading state, real empty state is handled by SearchMoneyRequestReportEmptyState + ListEmptyComponent={isLoadingReportActions ? : undefined} // This skeleton component is only used for loading state, the empty state is handled by SearchMoneyRequestReportEmptyState /> )} From 05e2f155edb8690f0e8732a830f6889f515ba1ba Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Fri, 23 May 2025 10:04:36 +0200 Subject: [PATCH 4/6] fix typecheck --- src/pages/home/ReportScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index df8010fc9389..a1ef9731b40b 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -828,7 +828,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) { newTransactions={newTransactions} hasOlderActions={hasOlderActions} hasNewerActions={hasNewerActions} - isLoadingReportActions={reportMetadata?.isLoadingInitialReportActions} + isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions} /> ) : null} {isCurrentReportLoadedFromOnyx ? ( From 732873bda35919705821655429cfe958965e52fe Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Fri, 23 May 2025 10:38:29 +0200 Subject: [PATCH 5/6] polish entering animation --- .../MoneyRequestReportTransactionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index a0bb02d11326..5be100f48599 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -306,7 +306,7 @@ function MoneyRequestReportTransactionList({ {hasComments || isLoadingReportActions ? translate('common.comments') : ''} From a155fb8bd2152e4dfb5aa0280a7c72357fa543f3 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Fri, 23 May 2025 11:40:15 +0200 Subject: [PATCH 6/6] add missing display names --- src/components/MoneyReportHeaderStatusBarSkeleton.tsx | 2 ++ .../MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/components/MoneyReportHeaderStatusBarSkeleton.tsx b/src/components/MoneyReportHeaderStatusBarSkeleton.tsx index 8b433bd3f925..6294fa4c80ba 100644 --- a/src/components/MoneyReportHeaderStatusBarSkeleton.tsx +++ b/src/components/MoneyReportHeaderStatusBarSkeleton.tsx @@ -33,4 +33,6 @@ function MoneyReportHeaderStatusBarSkeleton() { ); } +MoneyReportHeaderStatusBarSkeleton.displayName = 'MoneyReportHeaderStatusBarSkeleton'; + export default MoneyReportHeaderStatusBarSkeleton; diff --git a/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx b/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx index 1c2b50a6c9ba..b5bece629b5d 100644 --- a/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx +++ b/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx @@ -13,4 +13,6 @@ function ReportActionsListLoadingSkeleton() { ); } +ReportActionsListLoadingSkeleton.displayName = 'ReportActionsListLoadingSkeleton'; + export default ReportActionsListLoadingSkeleton;