Skeleton Loading React (Native) JS Code

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:

1. open-source solutions had too many input variables & thus complexity, internal use case is quite rigid and would do fine with less flexibility,
2. 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!