[HOLD for payment 2024-06-28] [$250] Search - Missing offline indicator on web, offline indicator appears below card on mobile

[m-natarajan]

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.4.82-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: n/a
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:

Precondition:

• User has no expenses (new account).

1. Go to staging.new.expensify.com
2. Go to Search.
3. Go offline.

Expected Result:

Offline indicator will appear on Search page.

Actual Result:

On web, offline indicator is missing on Search page.
On mobile layout (mweb, Android and iOS), the offline indicator appears right below the empty state card.

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

Bug6510103_1718149414586.20240612_073917.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c5fcba63309d6ea0
• Upwork Job ID: 1802495994147145655
• Last Price Increase: 2024-06-17
• Automatic offers:
• ikevin127 | Reviewer | 102774606
• bernhardoj | Contributor | 102774608

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

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

[m-natarajan]

@VictoriaExpensify 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

[m-natarajan]

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

[bernhardoj]

Proposal

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

Missing offline indicator for search page and appears below the empty state view in small screen.

What is the root cause of that problem?

On the large screen, the offline indicator won't show by default, that's why we have a shouldShowOfflineIndicatorInWideScreen prop, but we don't use it for the search page central pane.

App/src/pages/Search/SearchPage.tsx

Lines 44 to 45 in 05f85cb

	return (
	<ScreenWrapper testID={Search.displayName}>

For mobile screen/small screen, the offline indicator shown below the empty state view because the empty state view doesn't take the full height of the screen.

We previously had this issue for categories and tags page too.

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

Add shouldShowOfflineIndicatorInWideScreen to SearchPage ScreenWrapper.

To put the offline indicator at the bottom of the page, we can apply
offlineIndicatorStyle={styles.mtAuto}

to the ScreenWrapper for both SearchPage and SearchPageBottomTab which we did for the categories and tags page too.

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 290 to 292 in 05f85cb

	shouldShowOfflineIndicatorInWideScreen
	offlineIndicatorStyle={styles.mtAuto}
	>

[VictoriaExpensify]

I'll have to look at this one in the morning

[VictoriaExpensify]

Hey @m-natarajan , sorry if this is a silly question, but if the site is offline wouldn't we expect the webpage to just not load? I know that isn't the case with the app, but thought it would be with web

[VictoriaExpensify]

Ok chatted with a few others about this and agreed it is a bug and should match mobile.

[melvin-bot]

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