[$1000] Fix empty state shown on scroll up in multi-comment threads in all platforms

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Log in
2. Click into a thread where there are a lot of comments
3. Scroll up to the original post and there is a huge gap of space above the top comment of the thread

Expected Result:

For the original post to be held at the top position

Actual Result:

Blank space that looked like something wasn’t loading

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.32.5

Reproducible in staging?: yes

Reproducible in production?: yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

RPReplay_Final1687618737.MP4

Expensify/Expensify Issue URL:

Issue reported by: Niki Wallroth

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686967294130149

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018db6d5bc85447038
• Upwork Job ID: 1674045770894585856
• Last Price Increase: 2023-06-28

[melvin-bot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[bernhardoj]

Proposal

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

There are some blank spaces above the thread parent message that could confuse users thinking that there are still some unloaded messages above.

What is the root cause of that problem?

In the thread parent report action, we are wrapping the action with Views that have styles from getReportWelcomeContainerStyle and getReportWelcomeTopMarginStyle.

App/src/styles/StyleUtils.js

Lines 901 to 915 in 820fa93

	function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth) {
	if (isSmallScreenWidth) {
	return {
	height: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT,
	width: '100%',
	position: 'absolute',
	};
	}
	return {
	height: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT,
	width: '100%',
	position: 'absolute',
	};
	}

App/src/styles/StyleUtils.js

Lines 923 to 933 in 820fa93

	function getReportWelcomeTopMarginStyle(isSmallScreenWidth) {
	if (isSmallScreenWidth) {
	return {
	marginTop: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.VIEW_HEIGHT,
	};
	}
	return {
	marginTop: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.VIEW_HEIGHT,
	};
	}

The blank space is caused by both margin top and min height. These same styles are being used for the report welcome text here.

App/src/pages/home/report/ReportActionItemCreated.js

Lines 63 to 72 in 820fa93

	<View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
	<Image
	pointerEvents="none"
	source={EmptyStateBackgroundImage}
	style={StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth)}
	/>
	<View
	accessibilityLabel={props.translate('accessibilityHints.chatWelcomeMessage')}
	style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}
	>

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

Based on the discussions below, we want to also have the empty state background image without the welcome text and avatar.

So, in ReportActionItemParentAction, add the empty state background image just like we have in ReportActionItemCreated

App/src/pages/home/report/ReportActionItemCreated.js

Lines 63 to 68 in 5f5dd02

	<View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
	<Image
	pointerEvents="none"
	source={EmptyStateBackgroundImage}
	style={StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth)}
	/>

Result

[shawnborton]

We should rename this issue to address the empty state above all threads (including expenses/reports/tasks/etc), not just for public rooms. And this affects all platforms, not just iOS.

Ideally we would just reuse the same empty state but without the big avatar and text, like so:

[shawnborton]

cc @grgia @jasperhuangg @thienlnam @JmillsExpensify @trjExpensify since I believe we've all chatted about this at some point

[trjExpensify]

Yeah, I think it makes sense to do one update holistically here. 👍

[bernhardoj]

Proposal updated to show the empty state background

[melvin-bot]

@muttmuure 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/~018db6d5bc85447038

[melvin-bot]

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

[melvin-bot]

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

[muttmuure]

Updated to incorporate all platforms and all places where threads appear

[muttmuure]

@abdulrahuman5196 @bernhardoj appears to have a solution ready to go for this one here

[abdulrahuman5196]

Thank you. Will check on this

[abdulrahuman5196]

@bernhardoj 's proposal here #21493 (comment) looks good and works well as per the current expectation to show empty background image.

🎀👀🎀
C+ Reviewed

🎀 👀 🎀 C+ reviewed

cc: @muttmuure

[melvin-bot]

Triggered auto assignment to @Gonals, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[abdulrahuman5196]

@Gonals C+ approved comment is here - #21493 (comment)

[grgia]

@Gonals @shawnborton I was working on animating the empty state with lottie animations and making this change. However, there's been some problems with resizing the lottie files that's slowed it down. Here's the related issue - #19954. We can take the proposal as it will fix it quickly, but it will be overwritten by the work in my linked issue that I'm already working on.

[shawnborton]

I don't feel too strongly there, which path do you recommend?

[grgia]

I think we can close out this issue in favor of that one, and I'll try to prioritize wrapping that one up before this week/early next week

[muttmuure]

I'll follow your lead @grgia. We can always reopen if this is still reported after your fix is live.