From 4d260f52f1c0c5e56442f7769ed9e6834b34e9cd Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 28 Mar 2024 12:40:55 +0100 Subject: [PATCH 1/2] WIP loader --- src/pages/home/ReportScreen.tsx | 2 +- src/pages/home/report/ReportActionsView.tsx | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index e4a20aa45989..5d531c077bc8 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -645,7 +645,7 @@ function ReportScreen({ {/* Note: The ReportActionsSkeletonView should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} - {shouldShowSkeleton && } + {/* {shouldShowSkeleton && } */} {isCurrentReportLoadedFromOnyx ? ( { + if (!reportActionID) { + return listOldID; + } isFirstLinkedActionRender.current = true; const newID = generateNewRandomInt(listOldID, 1, Number.MAX_SAFE_INTEGER); listOldID = newID; return newID; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [route, isLoadingInitialReportActions]); + }, [route, isLoadingInitialReportActions, reportActionID]); const indexOfLinkedAction = useMemo(() => { - if (!reportActionID || isLoading) { + if (!reportActionID) { return -1; } return allReportActions.findIndex((obj) => String(obj.reportActionID) === String(isFirstLinkedActionRender.current ? reportActionID : currentReportActionID)); - }, [allReportActions, currentReportActionID, reportActionID, isLoading]); + }, [allReportActions, currentReportActionID, reportActionID]); const reportActions = useMemo(() => { if (!reportActionID) { return allReportActions; } - if (isLoading || indexOfLinkedAction === -1) { + if (indexOfLinkedAction === -1) { return []; } @@ -208,7 +211,7 @@ function ReportActionsView({ }, []); useEffect(() => { - if (!reportActionID) { + if (!reportActionID || indexOfLinkedAction > -1) { return; } @@ -217,7 +220,7 @@ function ReportActionsView({ // There should be only one openReport execution per page start or navigating Report.openReport(reportID, reportActionID); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [route]); + }, [route, indexOfLinkedAction]); useEffect(() => { const prevNetwork = prevNetworkRef.current; From b9f7cff6ba9585d8fdd9e1b7c0a9353cfd5434df Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 2 Apr 2024 12:06:11 +0200 Subject: [PATCH 2/2] use shouldShowSkeleton --- src/pages/home/ReportScreen.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 5d531c077bc8..23b7dc9150fe 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -269,6 +269,10 @@ function ReportScreen({ const screenWrapperStyle: ViewStyle[] = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}]; const isEmptyChat = useMemo((): boolean => reportActions.length === 0, [reportActions]); const isOptimisticDelete = report.statusNum === CONST.REPORT.STATUS_NUM.CLOSED; + const isLinkedMessageAvailable = useMemo( + (): boolean => sortedAllReportActions.findIndex((obj) => String(obj.reportActionID) === String(reportActionIDFromRoute)) > -1, + [sortedAllReportActions, reportActionIDFromRoute], + ); // If there's a non-404 error for the report we should show it instead of blocking the screen const hasHelpfulErrors = Object.keys(report?.errorFields ?? {}).some((key) => key !== 'notFound'); @@ -337,11 +341,12 @@ function ReportScreen({ const isLoading = !ReportUtils.isValidReportIDFromPath(reportIDFromRoute) || !isSidebarLoaded || PersonalDetailsUtils.isPersonalDetailsEmpty(); const shouldShowSkeleton = - isLinkingToMessage || - !isCurrentReportLoadedFromOnyx || - (reportActions.length === 0 && !!reportMetadata?.isLoadingInitialReportActions) || - isLoading || - (!!reportActionIDFromRoute && reportMetadata?.isLoadingInitialReportActions); + !isLinkedMessageAvailable && + (isLinkingToMessage || + !isCurrentReportLoadedFromOnyx || + (reportActions.length === 0 && !!reportMetadata?.isLoadingInitialReportActions) || + isLoading || + (!!reportActionIDFromRoute && reportMetadata?.isLoadingInitialReportActions)); const shouldShowReportActionList = isCurrentReportLoadedFromOnyx && !isLoading; // eslint-disable-next-line rulesdir/no-negated-variables const shouldShowNotFoundPage = useMemo( @@ -645,7 +650,7 @@ function ReportScreen({ {/* Note: The ReportActionsSkeletonView should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} - {/* {shouldShowSkeleton && } */} + {shouldShowSkeleton && } {isCurrentReportLoadedFromOnyx ? (