[HOLD #12054] [$1000] Conversation DM bounces, flickers, and lags when scrolling downward in a long chat

[isagoico]

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

---

Expected Result:

Scrolling through a chat DM should be smooth (doesn't bounce, flicker, or lag) regardless of conversation length.

Actual Result:

The chat DM bounces when scrolling downward in a long conversation.

Action Performed:

1. Open the Expensify.cash app on an Android device
2. Navigate to a chat DM that has a long conversation of back and forth.
3. Scroll upwards for a few seconds.
4. Stop scrolling upward, and then slowly scroll downard at a reading speed.

Note: lag and flickering behavior is especially worsened if you:

• Scroll slowly by tapping and releasing your finger each time (i.e. after each scroll downward, lift your finger, wait a moment, and then repeat...)
• Fully expand the keyboard and scroll downward slowly.

Workaround:

You can still scroll, but it's a poor UX and the scroll should be smooth.

Platform:

Where is this issue occurring? All platforms

Web iOS Android Desktop App Mobile Web

Version Number: 1.0.65-0

Notes/Photos/Videos:

https://user-images.githubusercontent.com/44479856/115792143-beb73900-a397-11eb-9183-c9f9dc35da61.mp4

Expensify/Expensify Issue URL: https://www.upwork.com/jobs/~0140ca576a3b244cff

View all open jobs on Upwork

---

From @quinthar https://expensify.slack.com/archives/C01GTK53T8Q/p1619067337008500

ISSUE: scrolling backwards seems to work great, but when you scroll forwards it Jitters all over the place. It's very hard to describe, but it's perfectly reproducible on android. Just go into a long conversation, scroll back a few pages, and then scroll forward slowly, and it bounces all over the place.

[JmillsExpensify]

Yeah agreed, I don't think this issue should on hold anymore.

[michaelhaxhiu]

Ugh damn, definitely got confused by the titling of https://github.com/Expensify/App/issues/2985 (which is actually about comment linking).

[michaelhaxhiu]

Going to take the liberty to price this at $500 to start. cc @kidroca in case you want to close a cold case 🕵️ 💼

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[michaelhaxhiu]

@Expensify/applause Can someone please test this issue again to ensure it's still reproducible? It was originally reported on Android, but can you test on all devices please - I've recently experienced weird behavior with scrolling in prior weeks on desktop and ios.

[JmillsExpensify]

Thanks for getting this one going again!

[kidroca]

I was able to recreate this on Android Emulator Checkout around the 4th and the 20th second marks:

https://user-images.githubusercontent.com/12156624/194669183-750c04a3-a022-443e-8997-eed8900ad361.mp4

I'm not sure what causes this, but it's probably related to virtualization and items being rendered outside the view window As we scroll down actions are removed from the top and added to the bottom which causes a flicker, but it's very hard to recreate and trace

[michaelhaxhiu]

but it's probably related to virtualization

Does that invalidate the reproduction video in any way?

On my side - I just reproduced it on iOS device (latest version / iOS 16) in a DM with a colleague. This definitely still exists and needs to be fixed. Guidance on how to reproduce:

• Use a DM with messages that are inbound / outbound
• Scroll upward relatively quickly. After a few moments it'll start up jump and flicker
• Happens regardless of whether or not the keyboard is expanded while you scroll.
• Bonus: if you get to a patch of white space in the scrolling and try to stop the scroll by tapping the whitespace, it bugs out really bad like this:

https://user-images.githubusercontent.com/13206896/194758139-5fbe6818-1cc9-4a18-b7e4-f79b08fbeba4.MP4

[JmillsExpensify]

I agree this happens pretty frequently, and in fact, I can produce it in either scroll direction pretty easily on a chat that has lots of history. Here's an example with Concierge.

https://user-images.githubusercontent.com/1127863/194794715-671f49d1-62bd-4552-89bb-ff50c7f09f96.mov

[michaelhaxhiu]

I'm not sure if this is resolvable Externally at this point in time, but I think it's valuable to figure it out and pay any parties who help us confirm. cc @Julesssss

[Julesssss]

@michaelhaxhiu we have quite a few reproductions, let's leave the issue open and see if we receive any proposals.

[kidroca]

@michaelhaxhiu

but it's probably related to virtualization

Does that invalidate the reproduction video in any way?

No, I'm just thinking of what might be causing the problem We can test whether it's virtualization related, by disabling virtualization for the inverted list, though this might have a big performance hit and make it impossible to scroll anyway

Since it happens on iOS as well I lean towards virtualization and/or how we render report action items - rendering an item adjusts the virtual list on the fly (item scroll position, list scrollable height), because the list has no idea how big is a comment before it render it

@JmillsExpensify

I agree this happens pretty frequently, and in fact, I can produce it in either scroll direction pretty easily on a chat that has lots of history.

Your case might be related to this ticket

• https://github.com/Expensify/App/issues/7860

[JmillsExpensify]

@kidroca Oh thanks, that one wasn't on my radar. Hopefully we'll start to get movement on it soon since we've started work on comment linking, which blocks it in turn.

[JmillsExpensify]

Is this issue on hold for #7860, or alternatively if not, does anyone have a strong grasp of next steps so that we can keep this moving forward? Thanks!

[michaelhaxhiu]

Doubling price to $1000, and re-surfacing this comment:

I'm not sure if this is resolvable Externally at this point in time, but I think it's valuable to figure it out and pay any parties who help us confirm.

[michaelhaxhiu]

Update:

• There's a proposal on https://github.com/Expensify/App/issues/7860 that we are carefully watching, which may resolve this bug and the issue linked. ⌛
• If you are a contributor and think this is independently resolvable, feel free to make a case and proposal here anyway.

[JmillsExpensify]

Given that we seem to be unholding #7860, should we now put this issue on [Hold] since it will likely be solved by that issue? That's an epic proposal that is going to be broken down into 4-5 separate issues.

[michaelhaxhiu]

@JmillsExpensify my only hesitation is assuming this will certainly be fixed by #7860.

Or perhaps better - we can directly ask @LucioChavezFuentes if they agree that this problem will be fixed via their proposal in https://github.com/Expensify/App/issues/7860.

[michaelhaxhiu]

Adding Hold to GH title as we are tracking this issue as part of https://github.com/Expensify/App/issues/12054

[LucioChavezFuentes]

Or perhaps better - we can directly ask @LucioChavezFuentes if they agree that this problem will be fixed via their proposal in https://github.com/Expensify/App/issues/7860.

On Web I'm sure this problem will be fixed with my proposal. But in Android and IOS can't reproduce the problem. Need to make more tests on these platforms. Do the lists with this issue have images?

By the way, what 'DM' means?

[michaelhaxhiu]

@LucioChavezFuentes ah sorry, DM = direct message

[michaelhaxhiu]

Still held.

[michaelhaxhiu]

Same same melvin

[michaelhaxhiu]

Held still. Keeping assigned while I'm OOO for 1.5 weeks. If this becomes unblocked please re-assign a new BZ @Julesssss

[Julesssss]

Still held

[Julesssss]

No change

[Santhosh-Sellavel]

on hold

[michaelhaxhiu]

Stillllll held

[Julesssss]

Held stilll

[Santhosh-Sellavel]

onhold

[Julesssss]

Not overdue, on hold.

[JmillsExpensify]

What's our plan for #12054? Do either of you know?

[Julesssss]

I'm out of the loop on pagination currently. It seems like we have a contributor making progress though?

[Julesssss]

bumped the linked issue for an update

[Julesssss]

We seem held up on the contributor.

[michaelhaxhiu]

Posting internally to see if we ought to revise our gameplan or hold course.

https://expensify.slack.com/archives/C01SKUP7QR0/p1677692378964509

[Santhosh-Sellavel]

On hold

[michaelhaxhiu]

Still in progress...

Janic from Margelo mentioned:

I had a look, the solution here https://github.com/Expensify/react-native-web/commit/ab2ebd84250d60598e69f24c7289aafd1e82f659 seems good and what the maintainer of RN web is looking for. The main idea is to fix RN web behaviours to match RN exactly to fix the issues with virtualized list instead of patching virtualized list to work with rn web behaviours.

[JmillsExpensify]

Further updates in the linked hold issue this week.

[Julesssss]

Seems like the contributor has merged 3 PRs related to pagination! I think we are now waiting for another PR and then for the upstream library to be updated.

[michaelhaxhiu]

Progress is 📈 . Waiting for the fix to merge upstream at this point per https://github.com/Expensify/App/issues/12054#issuecomment-1505811916

[michaelhaxhiu]

Seems stuff is still progression, and we are very close! Let's see next week if this is ready 🐣

[michaelhaxhiu]

@Julesssss and @Santhosh-Sellavel just to confirm, is this still held? I'm having a hard time following if this is a blocker or not?

[Julesssss]

Yeah we're now holding on the RN library bump.

[michaelhaxhiu]

Thanks 👍

[michaelhaxhiu]

No movement, still held.

[michaelhaxhiu]

Same same.

[michaelhaxhiu]

still blocked