feat(celo-news): skeleton placeholder while loading #3274
Merged
Conversation
This file contains 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
Codecov Report
@@ Coverage Diff @@
## main #3274 +/- ##
=======================================
Coverage 80.57% 80.58%
=======================================
Files 664 665 +1
Lines 23971 23977 +6
Branches 4315 4315
=======================================
+ Hits 19314 19321 +7
+ Misses 4591 4590 -1
Partials 66 66
Continue to review full report at Codecov.
|
jeanregisser
commented
Dec 21, 2022
Comment on lines
+65
to
+74
| <View style={styles.contentContainer}> | ||
| <View style={{ ...styles.author, width: 60 }} /> | ||
| <View style={styles.row}> | ||
| <View style={{ flex: 1 }}> | ||
| <View style={{ ...styles.title, flex: undefined, marginBottom: 4 }} /> | ||
| <View style={{ ...styles.title, flex: undefined, width: '60%' }} /> | ||
| </View> | ||
| <View style={styles.image} /> | ||
| </View> | ||
| </View> |
There was a problem hiding this comment.
I broke our rule of not using inline styles here because I thought it made more sense to have them directly there.
But let me know if you think I should really not do this.
jeanregisser
force-pushed
the
jeanregisser/skeleton-placeholder
branch
from
0c3b7dd
to
8d4dc8e
Compare
kathaypacific
approved these changes
Dec 23, 2022
|
Yes the patch was submitted already: chramos/react-native-skeleton-placeholder#71 |
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.
Description
This replaces the loading spinner by a skeleton placeholder with a shimmering animation in the Celo news feed.
Why?
From https://blog.prototypr.io/skeleton-loader-an-overview-purpose-usage-and-design-173b5340d0e1
Next: use this in other screens where it makes sense (transaction list, dapp list, etc).
I had a look at several libraries to implement this and settled on https://github.com/chramos/react-native-skeleton-placeholder as it had the "best" implementation using a mask and linear gradient so the effect works across several isolated views, with an animation driven by the native driver.
In the future, I could see us fork the lib or include it in our components to further customize it to our needs.
Test plan
screencap-2022-12-21T135359.194Z-1080.mp4
Note: I added an artificial delay of 5 secs in the above video so we can see it better
Related issues
Backwards compatibility
Yes