Skip to content

Commit

Permalink
Merge pull request #36014 from paultsimura/fix/34414-fetch-report
Browse files Browse the repository at this point in the history
fix: Show loader while fetching the report
  • Loading branch information
Gonals authored Feb 12, 2024
2 parents d09d39b + b955f56 commit d6bd1c6
Showing 1 changed file with 15 additions and 8 deletions.
23 changes: 15 additions & 8 deletions src/pages/home/report/withReportOrNotFound.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ type WithReportOrNotFoundOnyxProps = {
/** The report currently being looked at */
report: OnyxEntry<OnyxTypes.Report>;

/** Metadata of the report currently being looked at */
reportMetadata: OnyxEntry<OnyxTypes.ReportMetadata>;

/** The policies which the user has access to */
policies: OnyxCollection<OnyxTypes.Policy>;

Expand All @@ -42,28 +45,29 @@ export default function (
return function <TProps extends WithReportOrNotFoundProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
const contentShown = React.useRef(false);
const isReportIdInRoute = !!props.route.params.reportID?.length;
const isReportLoaded = !isEmptyObject(props.report) && !!props.report?.reportID;

const isReportIdInRoute = props.route.params.reportID?.length;
// The `isLoadingInitialReportActions` value will become `false` only after the first OpenReport API call is finished (either succeeded or failed)
const shouldFetchReport = isReportIdInRoute && props.reportMetadata?.isLoadingInitialReportActions !== false;

// When accessing certain report-dependant pages (e.g. Task Title) by deeplink, the OpenReport API is not called,
// So we need to call OpenReport API here to make sure the report data is loaded if it exists on the Server
useEffect(() => {
if (!isReportIdInRoute || !isEmptyObject(props.report)) {
if (isReportLoaded || !shouldFetchReport) {
// If the report is not required or is already loaded, we don't need to call the API
return;
}

Report.openReport(props.route.params.reportID);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isReportIdInRoute, props.route.params.reportID]);
}, [shouldFetchReport, isReportLoaded, props.route.params.reportID]);

if (shouldRequireReportID || isReportIdInRoute) {
const shouldShowFullScreenLoadingIndicator = props.isLoadingReportData !== false && (!Object.entries(props.report ?? {}).length || !props.report?.reportID);

const shouldShowNotFoundPage =
!Object.entries(props.report ?? {}).length || !props.report?.reportID || !ReportUtils.canAccessReport(props.report, props.policies, props.betas);
const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (props.isLoadingReportData !== false || shouldFetchReport);
const shouldShowNotFoundPage = !isReportLoaded || !ReportUtils.canAccessReport(props.report, props.policies, props.betas);

// If the content was shown but it's not anymore that means the report was deleted and we are probably navigating out of this screen.
// If the content was shown, but it's not anymore, that means the report was deleted, and we are probably navigating out of this screen.
// Return null for this case to avoid rendering FullScreenLoadingIndicator or NotFoundPage when animating transition.
if (shouldShowNotFoundPage && contentShown.current) {
return null;
Expand Down Expand Up @@ -97,6 +101,9 @@ export default function (
report: {
key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
},
reportMetadata: {
key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`,
},
isLoadingReportData: {
key: ONYXKEYS.IS_LOADING_REPORT_DATA,
},
Expand Down

0 comments on commit d6bd1c6

Please sign in to comment.