Skip to content

fix: only force full skeletons on single expense reports #59714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mountiny merged 5 commits into from
Apr 7, 2025
Merged

fix: only force full skeletons on single expense reports #59714

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1adc339
fix: keep the skeleton open for single expense reports only when fetc…
adhorodyski Apr 3, 2025
85688c6
Merge branch 'Expensify:main' into fix/single-expense-report-skeletons
adhorodyski Apr 7, 2025
50fca60
fix: limit forced skeletons to only single expense reports with missi…
adhorodyski Apr 7, 2025
33a89fd
Merge branch 'Expensify:main' into fix/single-expense-report-skeletons
adhorodyski Apr 7, 2025
5180b18
fix: force the skeleton on all single expense reports when fetching
adhorodyski Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/pages/home/report/ReportActionsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ function ReportActionsView({
const prevTransactionThreadReport = usePrevious(transactionThreadReport);
const reportActionID = route?.params?.reportActionID;
const prevReportActionID = usePrevious(reportActionID);
const reportPreviewAction = useMemo(() => getReportPreviewAction(report.chatReportID, report.reportID), [report.chatReportID, report.reportID]);
const didLayout = useRef(false);
const {isOffline} = useNetwork();

Expand Down Expand Up @@ -136,7 +137,6 @@ function ReportActionsView({
actions.push(optimisticCreatedAction);
}

const reportPreviewAction = getReportPreviewAction(report.chatReportID, report.reportID);
const moneyRequestActions = allReportActions.filter((action) => {
const originalMessage = isMoneyRequestAction(action) ? getOriginalMessage(action) : undefined;
return (
Expand Down Expand Up @@ -171,7 +171,7 @@ function ReportActionsView({
}

return [...actions, createdAction];
}, [allReportActions, report, transactionThreadReport]);
}, [allReportActions, report, transactionThreadReport, reportPreviewAction]);

// Get a sorted array of reportActions for both the current report and the transaction thread report associated with this report (if there is one)
// so that we display transaction-level and report-level report actions in order in the one-transaction view
Expand Down Expand Up @@ -206,6 +206,10 @@ function ReportActionsView({
actionCreated && lastVisibleActionCreated ? actionCreated >= lastVisibleActionCreated : actionCreated === lastVisibleActionCreated;
const hasNewestReportAction = isNewestAction(lastActionCreated, report.lastVisibleActionCreated) || isNewestAction(lastActionCreated, transactionThreadReport?.lastVisibleActionCreated);

const isSingleExpenseReport = reportPreviewAction?.childMoneyRequestCount === 1;
Comment thread
adhorodyski marked this conversation as resolved.
const isReportDataIncomplete = isSingleExpenseReport;
const isMissingReportActions = visibleReportActions.length === 0;

useEffect(() => {
// update ref with current state
prevShouldUseNarrowLayoutRef.current = shouldUseNarrowLayout;
Expand Down Expand Up @@ -271,11 +275,11 @@ function ReportActionsView({
};
}, [isTheFirstReportActionIsLinked]);

if ((isLoadingInitialReportActions && !isOffline) ?? isLoadingApp) {
if ((isLoadingInitialReportActions && (isReportDataIncomplete || isMissingReportActions) && !isOffline) ?? isLoadingApp) {
return <ReportActionsSkeletonView />;
}

if (visibleReportActions.length === 0) {
if (isMissingReportActions) {
return <ReportActionsSkeletonView shouldAnimate={false} />;
}

Expand Down