You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat: native shimmer and image loading redesign (#3467)
## 🎯 Goal
In this PR, we redesign the implementation of `ImageLoadingIndicator` to
present as a gradient shimmer with an activity indicator. Since we tried
a couple of approaches (one with `LinearGradient` from `RNSVG`), 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 the `MessageList` (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-native` as 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:
- Scrolling on Android by about 30-40 FPS (yes, really)
- Scrolling on iOS by about 10 FPS (it was fine-ish before as well)
compared to a `LinearGradient` and `Animated.View` approach for
rendering a shimmer.
TODO:
- [x] Write docs for the native side
- [x] Some additional cleanup
- [x] Maybe tweak/polish the shimmer/gradient a little bit more
- [x] Consolidate where we copy resources from (probably one folder for
the shared stuff, and we always copy from there) so that future native
implementations are trivial to add and all of the tooling works
- [x] Have another run at the `build.gradle` copying edge cases, I think
this can be done simpler
## 🛠 Implementation details
<!-- Provide a description of the implementation -->
## 🎨 UI Changes
<!-- Add relevant screenshots -->
<details>
<summary>iOS</summary>
<table>
<thead>
<tr>
<td>Before</td>
<td>After</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--<img src="" /> -->
</td>
<td>
<!--<img src="" /> -->
</td>
</tr>
</tbody>
</table>
</details>
<details>
<summary>Android</summary>
<table>
<thead>
<tr>
<td>Before</td>
<td>After</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--<img src="" /> -->
</td>
<td>
<!--<img src="" /> -->
</td>
</tr>
</tbody>
</table>
</details>
## 🧪 Testing
<!-- Explain how this change can be tested (or why it can't be tested)
-->
## ☑️ Checklist
- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
- [ ] SampleApp iOS and Android
- [ ] Expo iOS and Android
---------
Co-authored-by: Khushal Agarwal <khushal.agarwal987@gmail.com>
0 commit comments