[$250] Chat - Skeleton appears behind expensify pattern on chat page

[IuliiaHerets]

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.23-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4878182&group_by=cases:section_id&group_order=asc&group_id=229066
Email or phone of affected tester (no customers): gocemate+a1046@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. As anonymous user navigate to public room link from android/web
2. Verify the public room page opens
3. Check the skeleton position

Expected Result:

Loading skeleton should not be positioned behind expensify chat

Actual Result:

Skeleton appears behind expensify pattern on chat page

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6577958_1724232656722.Recording__3794.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d6a2ce5738f29be5
• Upwork Job ID: 1828326025582972875
• Last Price Increase: 2024-09-10
• Automatic offers:
• wildan-m | Contributor | 103914018

[melvin-bot]

Triggered auto assignment to @alexpensify (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.

[IuliiaHerets]

We think that this bug might be related to #vip-vsb

[IuliiaHerets]

@alexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[daledah]

Edited by proposal-police: This proposal was edited at 2024-08-21 20:37:29 UTC.

Proposal

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

Skeleton appears behind expensify pattern on chat page

What is the root cause of that problem?

We use shouldShowSkeleton here to determine if skeleton show on the screen.

shouldShowSkeleton uses several boolean values, one of them is isLoadingApp here. When isLoadingApp is true, shouldShowSkeleton will be true.

When we open an Expensify link for the first time, the app calls OpenApp, which will set isLoadingApp data using getOnyxDataForOpenOrReconnect here, with isOpenApp set to true.

After that, every time we reload or open a link, the app calls ReconnectApp, which also calls getOnyxDataForOpenOrReconnect here, but with default openApp value, which is false.

In getOnyxDataForOpenOrReconnect, with openApp set to true, isLoadingApp will be set to false after the API call, which make the screen work as expected: skeleton doesn't show up. But when we call ReconnectApp, isLoadingApp is not updated, its value is set to true without being set back to false, hence the bug.

Another interesting part that I found in AuthScreens:

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 166 to 173 in 2fd5bbe

	function handleNetworkReconnect() {
	if (isLoadingApp) {
	App.openApp();
	} else {
	Log.info('[handleNetworkReconnect] Sending ReconnectApp');
	App.reconnectApp(lastUpdateIDAppliedToClient);
	}
	}

This function is run every time we reload the app, and the above bug leads to an interesting behavior: we cycle between expected behavior and bug each time we reload the app.

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

We should call getOnyxDataForOpenOrReconnect in ReconnectApp with param openApp set to true as well.

What alternative solutions did you explore? (Optional)

[isogit123]

Edited by proposal-police: This proposal was edited at 2024-08-22 00:51:37 UTC.

Proposal

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

The skeleton appears behind the Expensify pattern on the chat page.

What is the root cause of that problem?

We show the skeleton when the app is loading by checking that isLoadingApp is true here:

App/src/pages/home/ReportScreen.tsx

Line 128 in 2fd5bbe

const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);

And using it here:

App/src/pages/home/ReportScreen.tsx

Lines 391 to 394 in 2fd5bbe

	const isLoading = isLoadingApp || !reportIDFromRoute || (!isSidebarLoaded && !isInNarrowPaneModal) || PersonalDetailsUtils.isPersonalDetailsEmpty();
	const shouldShowSkeleton =
	(isLinkingToMessage && !isLinkedMessagePageReady) || (!isLinkingToMessage && !isInitialPageReady) || isLoadingReportOnyx || !isCurrentReportLoadedFromOnyx || isLoading;

So the skeleton and the Expensify pattern appear at the same time.

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

We should avoid showing the Expensify pattern when the app is loading by showing it only when isLoadingApp becomes false.
To do this, we can edit the AnimatedEmptyStateBackground component to read the isLoadingApp by adding the following code line to the component:
const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
And introduce a prop let's call it shouldHideOnLoading so we hide the pattern when the app is loading only when this prop is true. This will help avoid design regressions.
Lastly, change the return of the component to be:

    return (
        !isLoadingApp && shouldHideOnLoading && (
        <View style={StyleUtils.getReportWelcomeBackgroundContainerStyle()}>
            <Animated.Image
                source={illustrations.EmptyStateBackgroundImage}
                style={[StyleUtils.getReportWelcomeBackgroundImageStyle(shouldUseNarrowLayout), animatedStyles]}
                resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
            />
        </View>
        )
    );

Below is a POC after applying the solution:

Screen_Recording_20240822_025351_Chrome.mp4

What alternative solutions did you explore? (Optional)

[isogit123]

Proposal updated
Cleaned up the proposal.

[isogit123]

Proposal updated
Update the solution to be applied by a prop.

[melvin-bot]

@alexpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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