feat: native shimmer and image loading redesign#3467
Open
isekovanic wants to merge 37 commits intodevelopfrom
Open
feat: native shimmer and image loading redesign#3467isekovanic wants to merge 37 commits intodevelopfrom
isekovanic wants to merge 37 commits intodevelopfrom
Conversation
…en view's detached
Contributor
SDK Size
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Goal
In this PR, we redesign the implementation of
ImageLoadingIndicatorto present as a gradient shimmer with an activity indicator. Since we tried a couple of approaches (one withLinearGradientfromRNSVG), at the end we settled for a purely native implementation for performance reasons. Having that many animated views be potentially active on the screen tanks scrolling performance of theMessageList(i.e a lot of images loading, perhaps with poor network conditions if they aren't cached). The shimmer is Fabric only, lives in shared native sources, and is exposed through the native handler registration flow for consistent integration across the current SDK setup.Visuals and behaviour are aligned between Android and iOS, keeping a single moving shimmer gradient, and tuning width/shape/alpha for a smoother effect closer to the previous output.
For packaging and local development flow, native source sync is now driven from
shared-nativeas the source of truth so local dev and release packaging stay aligned, with build/script flow updated so copies refresh automatically when running the sample app. I'm not yet sure this is the correct approach, but since this is relatively new as we didn't have that many native implementations in the SDK in the past it'll have to do for now and we'll of course refine it as we go on.Just for reference, the native shimmer implementation improves:
compared to a
LinearGradientandAnimated.Viewapproach for rendering a shimmer.TODO:
build.gradlecopying edge cases, I think this can be done simpler🛠 Implementation details
🎨 UI Changes
iOS
Android
🧪 Testing
☑️ Checklist
developbranch