Web - Search - Empty state page skeleton is cut off from the right

[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.68-0 Reproducible in staging?: Y Reproducible in production?: Y Issue was found when executing this PR: https://github.com/Expensify/App/pull/51913 Email or phone of affected tester (no customers): nathanmulugetatesting+2201@gmail.com Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Navigate to Search
3. Observe the background skeleton empty state on the right side

Expected Result:

The oval skeleton doesn't get cut off from the right

Actual Result:

The oval skeleton gets cut off from the right when there is a scroll bar on the right

Workaround:

Unknown

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

[melvin-bot[bot]]

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

[bernhardoj]

Proposal

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

The search page skeleton right side is cut off when there is a scrollbar.

What is the root cause of that problem?

This is how the calculation looks to decide the position of the right-most skeleton. We want to right-aligned the skeleton. https://github.com/Expensify/App/blob/64eaf2fdd357bd06008adfb9c0c049e09cd375b9/src/components/Skeletons/SearchRowSkeleton.tsx#L178-L180

The problem here is that when there is a scrollbar, the width of the search central pane is reduced, but since we used the windowWidth - lhn width to get the central pane width, the value is the same because windowWidth isn't reduced when there is a scrollbar. So, the skeleton position doesn't change either, thus getting cut off.

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

To solve it, first, we can get the width of the skeleton container from onLayout https://github.com/Expensify/App/blob/64eaf2fdd357bd06008adfb9c0c049e09cd375b9/src/components/Skeletons/SearchRowSkeleton.tsx#L124

const [containerWidth, setContainerWidth] = useState(0);

<View style={[styles.flex1, containerStyle]} onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>

Then, use the containerWidth on the calculation like this:

x={containerWidth - rightSideElementWidth - gapWidth - centralPanePadding}

We need to do the same for this skeleton https://github.com/Expensify/App/blob/64eaf2fdd357bd06008adfb9c0c049e09cd375b9/src/components/Skeletons/SearchRowSkeleton.tsx#L170-L172

x={containerWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}

What alternative solutions did you explore? (Optional)

Since we don't show scroll indicator for scroll page, https://github.com/Expensify/App/blob/64eaf2fdd357bd06008adfb9c0c049e09cd375b9/src/components/Search/index.tsx#L491

we can just hide it for the skeleton too by passing the showsVerticalScrollIndicator to EmptyStateComponent.

https://github.com/Expensify/App/blob/64eaf2fdd357bd06008adfb9c0c049e09cd375b9/src/pages/Search/EmptySearchView.tsx#L200-L211

and then use it here. https://github.com/Expensify/App/blob/64eaf2fdd357bd06008adfb9c0c049e09cd375b9/src/components/EmptyStateComponent/index.tsx#L85-L88

[jliexpensify]

Hi @deetergp and @Pujan92 - this is related to https://github.com/Expensify/App/pull/51913, so assigning you to review.