Edit: just "steal" it from material-ui here:
https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js
No, this is not because of a not-invented-here syndrome. A promising library is react-loading-skeleton, among many others.
The reasons for internal implementation:
- open-source solutions had too many input variables & thus complexity, internal use case is quite rigid and would do fine with less flexibility,
- introducing new libraries is always a risk. There was insufficient time to analyze if the library could introduce malicious code.
codesandbox example
https://codesandbox.io/s/red-meadow-n7ufzx?file=/src/App.js
Actual Code
const fadeAni = useRef(new Animated.Value(0.3)).current;
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(fadeAni, {
toValue: 0.8,
duration: 1000,
useNativeDriver: true
}),
Animated.timing(fadeAni, {
toValue: 0.3,
duration: 1000,
useNativeDriver: true
})
])
).start();
}, [fadeAni]);
return (
<View style={{ flexDirection: "row" }}>
<Animated.View
style={{
width: diameter,
height: diameter,
borderRadius: diameter / 2,
backgroundColor: "grey",
opacity: fadeAni,
marginRight: marginRight,
}}
/>
<Animated.View
style={{
width: width,
height: height,
borderRadius: height / 5,
backgroundColor: "grey",
opacity: fadeAni
}}
/>
</View>
)
Wave Animation
Would you like to see that? I can add that later if you would like!
Top comments (0)