[Due for payment 2025-02-26] [$250] Room - "Private Notes" section loads infinitely when creating room offline and opening it

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.86-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5464622&group_by=cases:section_id&group_order=asc&group_id=229067
Email or phone of affected tester (no customers): ibellicotest+171@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome / Windows 10 - Chrome
App Component: Other

Action Performed:

1. Open the Expensify app.
2. Turn off internet connection.
3. Tap on the FAB and select "Start Chat"
4. Tap on "Room"
5. Type any name and create the room.
6. While still in offline mode, tap on room header.
7. Tap on "Private Notes"
8. Check that the section is correctly opened.

Expected Result:

The user should be able to access "Private Notes" section after creating room in offline mode.

Actual Result:

"Private Notes" section loads infinitely when opened after creating a room in offline mode and the internet connections is still off.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021882110833017383688
• Upwork Job ID: 1882110833017383688
• Last Price Increase: 2025-02-12
• Automatic offers:
• huult | Contributor | 106128464

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

Triggered auto assignment to @OfstadC (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Private notes page loads infinitely when accessing it while offline for the first time.

What is the root cause of that problem?

If we look at the code, we want to show the loading indicator as long as the fetching isn't finished yet.

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Line 41 in 5133090

const isPrivateNotesFetchFinished = isPrivateNotesFetchTriggered && !reportMetadata.isLoadingPrivateNotes;

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Line 54 in 5133090

const shouldShowFullScreenLoadingIndicator = !isPrivateNotesFetchFinished;

While offline, the fetching never happens,

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Lines 44 to 52 in 5133090

	useEffect(() => {
	// Do not fetch private notes if isLoadingPrivateNotes is already defined, or if network is offline.
	if ((isPrivateNotesFetchTriggered && !isReconnecting) || isOffline) {
	return;
	}
	Report.getReportPrivateNote(report?.reportID);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- do not add report.isLoadingPrivateNotes to dependencies
	}, [report?.reportID, isOffline, isPrivateNotesFetchTriggered, isReconnecting]);

so the loading is shown.

What changes do you think we should make in order to solve the problem?

We can prevent showing the loading if the user is offline.

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Line 54 in 5133090

const shouldShowFullScreenLoadingIndicator = !isPrivateNotesFetchFinished;

const shouldShowFullScreenLoadingIndicator = !isOffline && !isPrivateNotesFetchFinished;

But this will show a not found page since the private notes data isn't available yet.

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Lines 57 to 70 in 5133090

	const shouldShowNotFoundPage = useMemo(() => {
	// Show not found view if the report is archived, or if the note is not of current user or if report is a self DM.
	if (ReportUtils.isArchivedReport(report, reportNameValuePairs) || isOtherUserNote || ReportUtils.isSelfDM(report)) {
	return true;
	}
	// Don't show not found view if the notes are still loading, or if the notes are non-empty.
	if (shouldShowFullScreenLoadingIndicator || !isPrivateNotesUndefined || isReconnecting) {
	return false;
	}
	// As notes being empty and not loading is a valid case, show not found view only in offline mode.
	return isOffline;
	}, [report, isOtherUserNote, shouldShowFullScreenLoadingIndicator, isPrivateNotesUndefined, isReconnecting, isOffline, reportNameValuePairs]);

If we don't want to show not found while the data is not available, we can just return false when the 1st condition passes.

const shouldShowNotFoundPage = useMemo(() => {
    // Show not found view if the report is archived, or if the note is not of current user or if report is a self DM.
    if (ReportUtils.isArchivedReport(report, reportNameValuePairs) || isOtherUserNote || ReportUtils.isSelfDM(report)) {
        return true;
    }

    return false;
}, [report, isOtherUserNote, reportNameValuePairs]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[huult]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-11 11:32:37 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

"Private Notes" section loads infinitely when creating room offline and opening it

What is the root cause of that problem?

The loading indicator never hides if we first access it in offline mode because it returns early due to isOffline

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Line 46 in 0de9910

if ((isPrivateNotesFetchTriggered && !isReconnecting) || isOffline) {

So, we are unable to call getReportPrivateNote, which causes the condition to keep the loading indicator always true, resulting in the issue of loading forever.

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Line 54 in 0de9910

const shouldShowFullScreenLoadingIndicator = !isPrivateNotesFetchFinished;

What changes do you think we should make in order to solve the problem?

To resolve this issue, we need to check if the app is in offline mode. If it is showing the loading indicator, it should redirect to the offline mode page because, when offline, we are unable to fetch API data. Therefore, we should show an offline page. Since we don’t currently have an offline page, we will create a new component, OfflinePage, to display. It could be a block view or something else, which will be confirmed by the design team.

1. Create new component OfflinePage. Dirs: src/pages/OfflinePage.tsx

import React from 'react';
import BlockingView from '@components/BlockingViews/BlockingView';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import ScreenWrapper from '@components/ScreenWrapper';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';

type LoadingPageProps = {
    /** Method to trigger when pressing back button of the header */
    onBackButtonPress?: () => void;

    title: string;
};

function OfflinePage({onBackButtonPress, title}: LoadingPageProps) {
    const theme = useTheme();
    const {translate} = useLocalize();

    return (
        <ScreenWrapper testID={OfflinePage.displayName}>
            <HeaderWithBackButton
                onBackButtonPress={onBackButtonPress}
                shouldShowBackButton
                title={title}
            />
            <BlockingView
                icon={Expensicons.OfflineCloud}
                iconColor={theme.offline}
                title={translate('common.youAppearToBeOffline')}
                subtitle={translate('common.thisFeatureRequiresInternet')}
            />
        </ScreenWrapper>
    );
}

OfflinePage.displayName = 'OfflinePage';

export default OfflinePage;

2 Show offline page

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Line 72 in 0de9910

if (shouldShowFullScreenLoadingIndicator) {

Update to:

    if (shouldShowFullScreenLoadingIndicator) {
        if (isOffline) {
            return <OfflinePage title={translate(pageTitle)} />;
        }
        return <LoadingPage title={translate(pageTitle)} />;
    }

Note:

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Line 58 in 0de9910

// Show not found view if the report is archived, or if the note is not of current user or if report is a self DM.

When we switch from online to offline, if the note does not belong to the current user, a ‘Not Found’ page should be displayed. That is the expected behavior

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Create test UI for new OfflinePage component

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

2 Show full offline page

App/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

Line 72 in 0de9910

if (shouldShowFullScreenLoadingIndicator) {

Update to:

    if (shouldShowFullScreenLoadingIndicator) {
        if (isOffline) {
            return (
                <ScreenWrapper
                    shouldEnableMaxHeight
                    includeSafeAreaPaddingBottom
                    testID={PrivateNotesEditPage.displayName}
                >
                    <HeaderWithBackButton
                        title={translate('privateNotes.title')}
                        onBackButtonPress={() => Navigation.dismissModal()}
                        shouldShowBackButton
                        onCloseButtonPress={() => Navigation.dismissModal()}
                    />
                    <FullPageOfflineBlockingView>
                        <View />
                    </FullPageOfflineBlockingView>
                </ScreenWrapper>
            );
        }
        return <LoadingPage title={translate(pageTitle)} />;
    }

[OfstadC]

Testing now

[melvin-bot]

@OfstadC Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021882110833017383688

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)