[HOLD for payment 2023-12-18] [$500] Login - LHN does not show skeleton placeholder when the page is refreshed while loading

[kbecciv]

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: 1.3.99.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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Log in to HT account.
3. While the page is loading after login, refresh the page.

Expected Result:

LHN will continue to show skeleton placeholder when the app is loading.

Actual Result:

LHN does not show skeleton placeholder when the page is refreshed while it is still loading.

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6277502_1700054423754.20231115_192956.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01146c50ef60338866
• Upwork Job ID: 1724785348789436416
• Last Price Increase: 2023-11-29
• Automatic offers:
• dukenv0307 | Contributor | 27903933

Issue Owner

Current Issue Owner: @conorpendergrast

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @conorpendergrast (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[paultsimura]

Proposal

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

On login, after page refresh, the LHN skeleton disappears while data is still loading.

What is the root cause of that problem?

We check whether the sidebar links data is loading by the following logic:

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

Line 70 in 91979f9

const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData;

The issue is that the SessionUtils.didUserLogInDuringSession() becomes false on the page reload.

This change was introduced here: #24204, but apparently the page reload was not considered at the time.

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

We shouldn't rely on the user being logged in in the session. It would be enough to rely only on the initial Onyx data being loaded.

We should change this line of code:

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

Line 70 in 91979f9

const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData;

To the following:

const isLoading = isLoadingReportData;

Result:

login-skeleton.mov

What alternative solutions did you explore? (Optional)

[dukenv0307]

Proposal

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

LHN does not show skeleton placeholder when the page is refreshed while loading

What is the root cause of that problem?

When we reload the page, loggedInDuringSession becomes false because it's initial again and now session.authToken existed and then skeleton doesn't appear

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

Line 70 in 8872311

const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData;

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

We can remove SessionUtils.didUserLogInDuringSession()

OPTIONAL: We can subscribe IS_LOADING_APP which is only true when OpenApp API is called instead of using IS_LOADING_REPORT_DATA.

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

Line 70 in 8872311

const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData;

What alternative solutions did you explore? (Optional)

If the expected is only show loading in LHN the first time after login, we can create a new Onyx key like isFirstTimeLoaded with default as false and then after OpenApp API is completed the first time we will update this to true. And we will use !isFirstTimeLoaded instead of didUserLogInDuringSession.

[melvin-bot]

@conorpendergrast, @sobitneupane Huh... This is 4 days overdue. Who can take care of this?