feat(mobile): optimized thumbnail rendering #19822
Conversation
| : FadeInPlaceholderImage( | ||
| placeholder: const ThumbnailPlaceholder(), | ||
| image: ThumbHashProvider(thumbHash: thumbHash), | ||
| fit: fit ?? BoxFit.cover, | ||
| ); |
There was a problem hiding this comment.
The reason we did it this way was to prevent the flashing when the widget changes from the placeholder to the thumbhash. Can you try wrapping them around with AnimatedSwitcher to make the transition a bit smooth?
There was a problem hiding this comment.
The thumbhash is the placeholder, I don't see why you'd want to delay displaying it. You want it to show as quickly as possible because the thumbnail is going to display soon. Also having less complex rendering stuff in here is good for scrolling performance.
There was a problem hiding this comment.
The changes in this PR make thumbhash loading feel abrupt. If you are not scrubbing but scrolling really fast, you will see many assets' state indicators floating on the screen instead of sitting on top of a defined placeholder area
On main I think the sequence is
Placeholder > Thumbhash > Image
In this PR, the sequence is
Blank > Thumbhash > Image
I think if we want to achieve a nicer feeling, it must be
Thumbhash > Image
There was a problem hiding this comment.
Did you test with a release build? I generally see the thumbhash straight away even when scrolling quickly. I haven't seen a blank screen with indicators like you describe. Also, I usually don't get to see the thumbhash on main because it's too slow to come in, so it's more like placeholder -> thumbnail.
There was a problem hiding this comment.
Yes I test with the release build on Android, connecting to the main preview instance
There was a problem hiding this comment.
Hmm, I guess it's a timing difference since I'm on iOS. Let me try to reproduce this.
|
Hi Mert, do you have any changes that you want to push for testing? |
mertalev
force-pushed
the
refactor/mobile-thumbhash
branch
from
c482bdf to
dbf9712
Compare
mertalev
changed the title
I pushed my thumbnail optimizations so you can give it a try. It's very much WIP (only iOS is implemented), but the results should speak for themselves. |
Description
Uses custom optimized image widgets along with a better thumbnail preparation process to make thumbnails render significantly more quickly than before, and in significantly higher quality.
Later PRs can improve this further using in-memory image caching and canceling image requests for offscreen widgets.
Notably, I also tested a platform view-based implementation based on UIImage. However, the high number of platform views made scrolling stutter-y and used more memory, so transferring the image to Flutter's rendering engine is more efficient. I want to try this approach for the asset viewer in a later PR though.
To do:
How Has This Been Tested?
Tested by scrolling and scrubbing in the timeline.