Skip to content
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

Jump to bottom

fix: Show loader while fetching the report #36014

Merged
merged 1 commit into from
Feb 12, 2024
Merged

fix: Show loader while fetching the report #36014

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 15 additions & 8 deletions src/pages/home/report/withReportOrNotFound.tsx
View file
Open in desktop
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
Loading