[HOLD for payment 2024-12-19] [$250] 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 [email protected] 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: #51913
Email or phone of affected tester (no customers): [email protected]
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
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021865178692528155887
• Upwork Job ID: 1865178692528155887
• Last Price Increase: 2024-12-06

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-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.

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 178 to 180 in 64eaf2f

	<Rect
	// We have to calculate this value to make sure the element is aligned to the right border.
	x={windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}

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

App/src/components/Skeletons/SearchRowSkeleton.tsx

Line 124 in 64eaf2f

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

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

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 170 to 172 in 64eaf2f

	<Rect
	// We have to calculate this value to make sure the element is aligned to the button on the right side.
	x={windowWidth - leftPaneWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}

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

What alternative solutions did you explore? (Optional)

Since we don't show scroll indicator for scroll page,

App/src/components/Search/index.tsx

Line 491 in 64eaf2f

showScrollIndicator={false}

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

App/src/pages/Search/EmptySearchView.tsx

Lines 200 to 211 in 64eaf2f

	<EmptyStateComponent
	SkeletonComponent={SearchRowSkeleton}
	headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
	headerMedia={content.headerMedia}
	headerStyles={[content.headerStyles, styles.emptyStateCardIllustrationContainer]}
	title={content.title}
	titleStyles={content.titleStyles}
	subtitle={content.subtitle}
	buttons={content.buttons}
	headerContentStyles={[styles.h100, styles.w100, content.headerContentStyles]}
	lottieWebViewStyles={styles.emptyStateFolderWebStyles}
	/>

and then use it here.

App/src/components/EmptyStateComponent/index.tsx

Lines 85 to 88 in 64eaf2f

	<ScrollView
	contentContainerStyle={[{minHeight: minModalHeight}, styles.flexGrow1, styles.flexShrink0, containerStyles]}
	style={styles.flex1}
	>

[jliexpensify]

Hi @deetergp and @Pujan92 - this is related to #51913, so assigning you to review.

[melvin-bot]

@deetergp, @Pujan92, @jliexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[jliexpensify]

Waiting on @deetergp and @Pujan92 to weigh in

[deetergp]

@bernhardoj's proposal sounds reasonable to me. What do you think @Pujan92?

[Pujan92]

Yes @deetergp but I am not able to reproduce it in my system.

Screen.Recording.2024-12-05.at.17.48.00.mov

[bernhardoj]

@Pujan92 please try to always show the scrollbar

[Pujan92]

I am 👍 with the @bernhardoj's alternative solution of passing showsVerticalScrollIndicator prop to the ScrollView.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @deetergp is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[melvin-bot]

Current assignee @Pujan92 is eligible for the External assigner, not assigning anyone new.

[deetergp]

Please disregard @shawnborton — I accidentally clicked the wrong tag :ohnothing:

[bernhardoj]

PR is ready
cc: @Pujan92

[shawnborton]

Is this some kind of regression or was it always set up this way? cc @filip-solecki

[filip-solecki]

Tbh it's hard to say, maybe there were some changes that broke up the calculations or it is uncovered scenario.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.74-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Hide search skeleton empty view scrollbar #53730

If no regressions arise, payment will be issued on 2024-12-19. 🎊

For reference, here are some details about the assignees on this issue:

• @Pujan92 requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests

[melvin-bot]

@Pujan92 @jliexpensify @Pujan92 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[jliexpensify]

Payment Summary

• C: @bernhardoj $250 (to be paid via ND)
• C+: @Pujan92 $250 (to be paid via ND)

[Pujan92]

@jliexpensify this isn't a regression of the mentioned PR, and it is a new fresh issue. So I am also eligible for the payment.

[jliexpensify]

Cool, thanks for letting me know - will add you in.

[jliexpensify]

Hi @deetergp - I'm headed OOO from the 18th - 29th, do you mind closing this GH when the payment date passes?

Payment Summary is here.

@Pujan92 - is there a need for a checklist?

[deetergp]

Hi @deetergp - I'm headed OOO from the 18th - 29th, do you mind closing this GH when the payment date passes?

Will do @jliexpensify! Enjoy our OOO time 🎉

[jliexpensify]

Thanks Scott, have a great Holiday Break!

@Pujan92 since it's my last day today, I want to confirm that there's no checklist?

[Pujan92]

@jliexpensify I think checklist isn't needed here.

[jliexpensify]

Great, thanks - in that case, Scott can simply close this on the 19th if there are no regressions.

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @Pujan92 owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@jliexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1865178692528155887/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[garrettmknight]

$250 approved for @Pujan92

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj based on this summary.