[Due for payment 2025-04-23] [$250] Show green loader everywhere we're showing skeleton loaders on the `Reports` page

[JmillsExpensify]

At the moment, we're not showing the green loader on the Reports page, minimally in a consistent way compared to the Inbox page.

As a result, let's fix that shortcoming. In particular, we want to: Show the green loader anytime we're showing skeleton loaders. Because after all, in our design system these two patterns communicate the same thing.

Not sure if it's helpful, but here's an example from my account, where I'm waiting on search results, but the green loader is absent.

cc @luacmartins

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021905373588423181896
• Upwork Job ID: 1905373588423181896
• Last Price Increase: 2025-03-27
• Automatic offers:
• thelullabyy | Contributor | 106759711

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

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

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[JmillsExpensify]

cc @Expensify/design since we chatted about this one. Btw, do we want to only show the green loader in the LHN, similar to how things work on Inbox?

[dannymcclain]

Yeah I think we would keep it to just the LHN even on the Reports page. I can be swayed for sure, but that seems like a good place to start to me.

[JmillsExpensify]

Nice, same. I think that's a good starting point.

[Shahidullah-Muffakir]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-27 22:11:27 UTC.

Proposal

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

Green loader is now showing in the search page

What is the root cause of that problem?

We area already having the the LoadingBar in the TopBar, and we are using the TopBar in the searchPage, the reason it is not showing, because we are using different conditions for showing the SearchRowSkeleton and the loader:

App/src/components/Search/index.tsx

Lines 334 to 339 in 674f07d

	if (shouldShowLoadingState) {
	return (
	<SearchRowSkeleton
	shouldAnimate
	containerStyle={shouldUseNarrowLayout && styles.searchListContentContainerStyles}
	/>

App/src/components/Navigation/TopBar.tsx

Line 79 in 674f07d

<LoadingBar shouldShow={isLoadingReportData ?? false} />

we are checking if the data is loaded this way:

App/src/components/Search/index.tsx

Line 201 in 674f07d

const isDataLoaded =

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

Pass the same condition used for showing the SearchRowSkeleton to the TopBar in the search page as a prop and use that to show the loader as:

1. Pass the shouldDisplayLoadingBar={!isDataLoaded} here:

App/src/pages/Search/SearchPage.tsx

Line 403 in 674f07d

<TopBar

and use the same

    const searchResults = currentSearchResults?.data ? currentSearchResults : lastNonEmptySearchResults;

    const isDataLoaded =
        searchResults?.data !== undefined && searchResults?.search?.type === queryJSON?.type && Array.isArray(status)
            ? searchResults?.search?.status === status.join(',')
            : searchResults?.search?.status === status;

2. Update the TopBar as:

            <LoadingBar shouldShow={(isLoadingReportData || shouldDisplayLoadingBar) ?? false} />

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

na

Screen.Recording.2025-03-28.at.3.46.18.AM.mov