[HOLD for payment 2023-09-07] [$1000] Chat - Opened chat does not show up in LHN when LHN is loading

[lanitochka17]

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

---

Issue found when executing PR #24204

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with account with many conversations
3. Copy link to any chat
4. Log out
5. Navigate to the link in Step 1
6. Log in
7. Right after the chat is loaded, return to LHN

Expected Result:

The opened chat in Step 6 will appear in LHN while the rest of the chats is loading

Actual Result:

The opened chat in Step 6 does not appear in LHN even though it is opened prior

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.54.7

Reproducible in staging?: Yes

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6165912_24204_mweb__1_.1.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013d3358a3bd902de6
• Upwork Job ID: 1691926354859388928
• Last Price Increase: 2023-08-16
• Automatic offers:
• s-alves10 | Contributor | 26165190

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[dummy-1111]

Proposal

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

Opened chat doesn't show up in LHN when LHN is loading

What is the root cause of that problem?

Please check the below code

App/src/pages/home/sidebar/SidebarLinks.js

Lines 231 to 251 in 8472f03

	{this.props.isLoading ? (
	<>
	{lodashGet(this.props.report, 'reportID') && (
	<OptionRowLHNData
	reportID={this.props.currentReportID}
	viewMode={viewMode}
	shouldDisableFocusOptions={this.props.isSmallScreenWidth}
	onSelectRow={this.showReportPage}
	/>
	)}
	<OptionsListSkeletonView shouldAnimate />
	</>
	) : (
	<LHNOptionsList
	contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom}]}
	data={this.props.optionListItems}
	onSelectRow={this.showReportPage}
	shouldDisableFocusOptions={this.props.isSmallScreenWidth}
	optionMode={viewMode}
	/>
	)}

As you can see, we show skeleton when props.isLoading is true, or show report list. Before this PR, props.isLoading is false when reports are not empty, so if any report was loaded, we don't show skeleton. We show preloaded report list while loading all reports. But now, isLoading is true and this.props.report is also empty because currentReportID is undefined. So skeleton is shown full page.

This is the root cause

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

When we open a report and navigate to the LHN, this.props.optionListItems is not empty. We should use this

Solution 1

Replacing the this.props.isLoading condition here with the this.props.isLoading && !this.props.optionListItems.length would give the exactly same result as production

Solution 2
I think it would be good to show existing reports with skeleton while loading. In order to do this, we can use the following code

        {this.props.isLoading ? (
            <>
                <LHNOptionsList
                    style={[styles.flexShrink1]}
                    contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom}]}
                    data={this.props.optionListItems}
                    onSelectRow={this.showReportPage}
                    shouldDisableFocusOptions={this.props.isSmallScreenWidth}
                    optionMode={viewMode}
                />
                <OptionsListSkeletonView shouldAnimate />
            </>
        ) : (
            <LHNOptionsList
                contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom}]}
                data={this.props.optionListItems}
                onSelectRow={this.showReportPage}
                shouldDisableFocusOptions={this.props.isSmallScreenWidth}
                optionMode={viewMode}
            />
        )}

Here we need to add additional props style to the LHNOptionList component. Its default value is styles.flex1 and this code

App/src/components/LHNOptionsList/LHNOptionsList.js

Line 70 in 8472f03

<View style={[styles.flex1]}>

will be replaced with

    style={props.style}

Solution 1

solution_1.mp4

Solution 2

solution_2.mp4

What alternative solutions did you explore? (Optional)

[melvin-bot]

Triggered auto assignment to @grgia (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[aldo-expensify]

cc @tienifr @ArekChr the PR #24204 seems to have caused this regression according to @s-alves10 , can you help confirm that?

Thanks @s-alves10 for the help investigating.

[ArekChr]

cc @tienifr @ArekChr the PR #24204 seems to have caused this regression according to @s-alves10 , can you help confirm that?

Thanks @s-alves10 for the help investigating.

@aldo-expensify Yes, this PR caused regression

[tienifr]

yes, it's my regression. I'll fix it asap

[yuwenmemon]

@tienifr any ETA on when you expect to have a PR up? If it's not going to be within the next few hours then should we revert the offending PR?