[$250] Workspace - Unable to scroll the page &skeleton pattern differs

[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: V9. 0.74-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app in both mweb and android
2. Go to workspace settings - categories
3. Select all category and delete it
4. Note the skeleton pattern above and below image
5. Try to scroll the page

Expected Result:

Skeleton pattern above& below must be same and scrolling of page must also be consistent in mweb and android.

Actual Result:

Skeleton pattern above& below is different in mweb and android. Then user can scroll the page in mweb but cannot scroll in android.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6690650_1733900974621.Screenrecorder-2024-12-11-12-31-56-638_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021869126524576530268
• Upwork Job ID: 1869126524576530268
• Last Price Increase: 2024-12-31

Issue Owner

Current Issue Owner: @eVoloshchak

[melvin-bot]

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

Inconcistency scroll behavior between native and mWeb.

What is the root cause of that problem?

The empty view component is wrapped with a ScrollView.

App/src/components/EmptyStateComponent/index.tsx

Lines 85 to 95 in 890806d

	return (
	<ScrollView
	showsVerticalScrollIndicator={showsVerticalScrollIndicator}
	contentContainerStyle={[{minHeight: minModalHeight}, styles.flexGrow1, styles.flexShrink0, containerStyles]}
	style={styles.flex1}
	>
	<View style={styles.skeletonBackground}>
	<SkeletonComponent
	gradientOpacityEnabled
	shouldAnimate={false}
	/>

It was added for this. In our case here, the view becomes scrollable when the skeleton items amount is bigger than the container can hold because we use ceil, so it's overflown.

App/src/components/Skeletons/ItemListSkeletonView.tsx

Line 53 in 890806d

const newNumItems = Math.ceil(totalHeight / totalItemHeight);

It behaves differently between native and mWeb because the mWeb screen height is smaller, so the skeleton amount also differs.

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

We have 2 options. First, we can add a new props to ItemListSkeletonView so we use Math.floor instead of Math.ceil so the skeleton items won't ever overflown the container.

The 2nd one is to set the skeleton background view overflow to hidden.

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

N/A

[CortneyOfstad]

Still working on testing this

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[CortneyOfstad]

Hey @eVoloshchak! I was able to recreate, and it looks like we have a proposal here for review when you have a chance. Thanks!

[CortneyOfstad]

Hey @eVoloshchak! Just a heads up that I will be OOO starting this afternoon (December 20th) and will be returning January 6th. A handful of folks on the BZ team will be online for a few days in between the 25th and the 1st, but we'll be operating with a skeleton crew. If any action is needed from a BZ perspective, please post this issue in #expensify-open-source and someone on the team will jump in. Otherwise, I will review when I'm back in office.

Thank you and Happy Holidays!

[melvin-bot]

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

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@eVoloshchak @CortneyOfstad this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@eVoloshchak, @CortneyOfstad 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@eVoloshchak, @CortneyOfstad Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot]

@eVoloshchak, @CortneyOfstad 12 days overdue now... This issue's end is nigh!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

This issue has not been updated in over 14 days. @eVoloshchak, @CortneyOfstad eroding to Weekly issue.