[$500] Chat - Chat view jerks when opening multline text in edit mode and scrolling up

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR: #31271

Version Number: v1.4.1-7
Reproducible in staging?: Y
Reproducible in production?: Y
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
Expensify/Expensify Issue URL:
Issue reported by: Applause-Intwrnal Team
Slack conversation: @

Action Performed:

1. Navigate to staging.new.expensify.com.
2. Go to chat.
3. Send multiline text until a scroll bar is visible.
4. Right click on the multiline message > Edit comment.
5. Scroll up slightly.

Expected Result:

Chat view does not jerk.

Actual Result:

Chat view jerks slightly.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6284920_1700533913222.20231121_012603.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012b0fd070f485bee6
• Upwork Job ID: 1726910768740585472
• Last Price Increase: 2023-11-21

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[ZhenjaHorbach]

The same root cause
#31586
The problem is with the loader

[brunovjk]

Proposal

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

The problem involves noticeable shaking in the chat view when engaging in specific actions, like opening multiline text in edit mode and scrolling up.

What is the root cause of that problem?

The root cause is traced to real-time adjustments in the container style within the ReportActionsList component. These adjustments correlate with changes in the isLoadingNewerReportActions prop, specifically the addition or removal of paddingTop: CONST.CHAT_HEADER_LOADER_HEIGHT.

The shaking occurs during scrolling, particularly when the scroll indicator approaches the bottom, triggering the Report.getNewerActions function.

The same root cause
#31586

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

In my perspective, this may not be a bug but rather a design decision. Three potential options for handling the loading circle's appearance are:

1- Current Behavior: Allow the content to move up and down as it does currently.
2 - Fixed Space for Loading Circle: Create a designated space for the loading circle, ensuring it appears and disappears without affecting existing content.
3 - Scroll Height Increase: Maintain the content in its current position while extending the overall height of the message scroll. Place the loading circle at the bottom, visible when users scroll to the very end.

What alternative solutions did you explore? (Optional)

As an alternative, we could replace the loading circle with a Linear Progress Indicator, taking the place of the existing padding. This avoids height adjustments and provides a continuous indication of the loading process.

[trjExpensify]

I don't think we need two issues open for this and #31586 with the same root cause. Feel free to let me know if you don't agree @getusha.