react-native-windows
react-native-windows copied to clipboard
microsoft
Render cached images synchronously
Description
Type of Change
- Bug fix (non-breaking change which fixes an issue)
Why
Previously the cached images still render asynchronously and therefore appear on the screen a few frames later than the adjacent UI, which results in flickers and flashes. The issue gets exacerbated on slower machines or when UI is busy.
What
In this PR I added a LRU cache which stores the loaded BitmapImage so that the image can render synchronously from the cache next time.
Screenshots
Below is the frame-by-frame playback for the before-and-after comparison.
Before: (Images appear after a few frames after the other UI has rendered)
https://user-images.githubusercontent.com/1132214/161341592-111b6412-07f0-44dc-8e86-5e876adcc401.mp4
After: (Images appear at the same time with the other UI)
https://user-images.githubusercontent.com/1132214/161341462-0bad8855-ffa0-4721-af6a-60fa61b069d2.mp4
Microsoft Reviewers: Open in CodeFlow
Looks like your dev environment isn't picking up the clangformat rules automatically. You can run yarn format at the root to manually run them.
@marty-wang Are we able to add a QuirkSetting to this PR? I believe that's the only thing stopping us from merging it in.
Hi @TatianaKapos, I am afraid that I won't have bandwidth to add QuirkSetting to this PR in the near future. Please feel free to commandeer this PR, or I am happy to release it to anyone who'd like to take it to the finish line. Thanks!
@acoates-ms Just checking in about this PR since it's a little stale. Do we still want to add a QuirkSetting or has anything changed? If so, I can add it or we should close it out?
@rozele @lyahdav Is this something that's still interesting from your end? The conversation here seemed to resolve that this should be quirked in order to be submitted.
@chrisglein this is still something we have in our fork, but it's not gated with a quirk setting. We likely don't have the bandwidth to update the PR to be gated on a quirk setting in the short-term.
It's likely that most of Messenger's image rendering will move to a custom component, so I think this can be closed out. Messenger has variants needed that are beyond the scope of core, like WebP support and this caching work.
This pull request has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.
