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

[MelvinBot]

Triggered auto assignment to @mateocole (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @ctkochan22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[ctkochan22]

Labels look good

[mallenexpensify]

@ctkochan22 bouncing back to you - do you think this can be worked on by a Contributor?

[ctkochan22]

@mallenexpensify Shoot sorry. Yes I think so.

[mallenexpensify]

Thanks @ctkochan22 , in the future, if a contributor can work on an issue apply the External label so it can be posted to Upwork. Adding it now.

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[michaelhaxhiu]

Will post today.

[michaelhaxhiu]

Just tested on my Android, and I was able to reproduce successfully. Posted to Upwork as of right now ✅ .

[MelvinBot]

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

[Julesssss]

CC @kidroca, as he had some ideas for these improvements here. Perhaps you would be interested in this issue?

[kidroca]

I don't think this is related to cache.

When I studied the effects of virtualization I came to a similar situation when I had a large chat: https://github.com/Expensify/Expensify.cash/issues/2629#issuecomment-832516464

My theory (short version) For big chats you reach the virtualization window boundary As you scroll down an item is removed from the top Another item is added on the bottom Native, does not provide getItemLayout to the flat list It has to put the item, render it and then shift content if it has to (only when scrolling down)

Implementing a fast getItemLayout would probably be hard. There's an open ticket about a replacement of the FlatList component which might solve the problem here entirely

In theory this should be recreatable on iOS as well, maybe the list handles better there as the devices are beefier. Any chance someone could try this on the oldest iPhone supported?

[michaelhaxhiu]

Any chance someone could try this on the oldest iPhone supported?

This would be good to ask in #expensify-open-source I think, as we have more eyes and exposure there. Can you post it there @kidroca? I agree with the idea of seeing if old iOS devices are included in the scope of the issue.

[rdjuric]

@kidroca @michaelhaxhiu Here's a test running on an old iPhone 5s.

https://user-images.githubusercontent.com/53711423/122099933-f6b38900-cde8-11eb-85a5-ec7a9b97f9ec.mov

It's from the build in the app store, so probably a few versions behind our main. Feels smooth on iOS and doesn't flicker.

[michaelhaxhiu]

@rdjuric thank you! Can you try once more, but this time expand our keyboard and scroll downward slowly? If it behaves the same, no need to record another vid.

[rdjuric]

@michaelhaxhiu Sorry! Forgot about the expanded keyboard 😅

https://user-images.githubusercontent.com/53711423/122101860-2d8a9e80-cdeb-11eb-872f-c0458940cc47.mp4

The issue does happens on iOS. I was also able to reproduce it while scrolling up the chat, not only down, seems to happen whenever the FlatList render new items. It stops flickering when we approach the end (or beginning) of the chat, as the FlatList doesn't need to render any new items.

[michaelhaxhiu]

Any takers on this issue so far?

[kidroca]

IMO this should wait the result of #2985 I don't see an easy fix and this might result in double or unnecessary work if the chat scrolling implementation is to be rehauled Proper Bidirectional scrolling implementation should fix the current issue

[michaelhaxhiu]

Applying the planning label till https://github.com/Expensify/Expensify.cash/issues/2985 is released.

[michaelhaxhiu]

Still waiting on https://github.com/Expensify/Expensify.cash/issues/2985

[michaelhaxhiu]

Still waiting on https://github.com/Expensify/Expensify.cash/issues/2985

[michaelhaxhiu]

Still waiting on https://github.com/Expensify/Expensify.cash/issues/2985

[MelvinBot]

@Julesssss, @michaelhaxhiu it looks like no one is assigned to work on this job. Please double the price or add a comment stating why the job isn't being doubled.

[michaelhaxhiu]

Still blocked on the same GH.

[michaelhaxhiu]

Still on hold.

[michaelhaxhiu]

Rory started working on https://github.com/Expensify/App/issues/2985 and will post an update sometime early this week.

[michaelhaxhiu]

Awaiting an update from Rory on https://github.com/Expensify/App/issues/2985, which Jeremy requested yesterday (September 8 2021).

[michaelhaxhiu]

Rory is making good progress on bi-directional scrolling, and working with Kidroca - https://github.com/Expensify/App/issues/2985

[Julesssss]

Issue is blocked currently, not overdue

[michaelhaxhiu]

Heads up I'm OOO for the next 1-2 weeks, and going to keep this one assigned. If you need to payout the contributor, feel free to unassign me and re-apply the external label -- that'll auto assign a new CM

[kadiealexander]

Please refer to this post for updated information on the n6 hold, we've raised the bonus to $250 for all issues where a PR is created before the N6 hold is lifted.

[Julesssss]

Issue is still on hold due as we're awaiting the outcome of this issue: https://github.com/Expensify/App/issues/2985

[Julesssss]

No change

[Julesssss]

Issue is still on hold due as we're awaiting the outcome of this issue: #2985

[Julesssss]

It looks like a solution is not far away in the parent issue.

[michaelhaxhiu]

Still keeping this one in the ol' holster until parent GH is complete.

[Julesssss]

Still waiting on the above

[michaelhaxhiu]

Same-same

[michaelhaxhiu]

Luca & Rory are making gradual progress on the blocker GH. 🤞

[michaelhaxhiu]

Still blocked.

[michaelhaxhiu]

Blocked still

[michaelhaxhiu]

Hold

[Julesssss]

Still held

[michaelhaxhiu]

still holding on https://github.com/Expensify/App/issues/2985

[michaelhaxhiu]

Not overdue

[michaelhaxhiu]

Still on hold

[michaelhaxhiu]

Still holding

[michaelhaxhiu]

still holding

[michaelhaxhiu]

This is holding on birectional scrolling still.

[trjExpensify]

Didn't we complete the bidirectional scrolling portion of the issue, so can't this come off hold now or are we actually held on comment linking or something?