diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 152b0236622..eb24109d522 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -283,6 +283,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'); @@ -351,11 +355,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( diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index 1b6a9614a46..d5142313329 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -142,7 +142,7 @@ function ReportActionsView({ listOldID = newID; return newID; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [route, isLoadingInitialReportActions]); + }, [route, isLoadingInitialReportActions, reportActionID]); // 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 @@ -162,18 +162,16 @@ function ReportActionsView({ }, [allReportActions, transactionThreadReportActions]); const indexOfLinkedAction = useMemo(() => { - if (!reportActionID || isLoading) { + if (!reportActionID) { return -1; } - return combinedReportActions.findIndex((obj) => String(obj.reportActionID) === String(isFirstLinkedActionRender.current ? reportActionID : currentReportActionID)); - }, [combinedReportActions, currentReportActionID, reportActionID, isLoading]); + }, [combinedReportActions, currentReportActionID, reportActionID]); const reportActions = useMemo(() => { if (!reportActionID) { return combinedReportActions; } - if (isLoading || indexOfLinkedAction === -1) { return []; } @@ -264,7 +262,7 @@ function ReportActionsView({ }, []); useEffect(() => { - if (!reportActionID) { + if (!reportActionID || indexOfLinkedAction > -1) { return; } @@ -273,7 +271,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;