Function LoadingContainer

components/LoadingContainer.js:8–79

({
  animation,
  children,
  loading,
  animationScale,
  style,
})

import { animations } from '../assets';

function LoadingContainer({
  animation,
  children,
  loading,
  animationScale,
  style,
}) {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  function onLayoutChange(event) {
    const { width, height } = event.nativeEvent.layout;

    if (width === 0 && height === 0) {
      return;
    }

    setDimensions({ width, height });
  }

  const lottieViewDimensions = useMemo(
    () => ({
      width: dimensions.width * animationScale,
      height: dimensions.height * animationScale,
    }),
    [animationScale, dimensions],
  );

  if (!children) {
    return null;
  }

  return (
    <View style={style.container}>
      {!loading && <View onLayout={onLayoutChange}>{children}</View>}
      {loading && (
        <View style={[style.container, dimensions]}>
          <LottieView
            style={lottieViewDimensions}
            source={animation}
            colorFilters={style.animationFilters}
            autoPlay
            loop
          />
        </View>
      )}
    </View>
  );
}

LoadingContainer.propTypes = {
  style: PropTypes.object.isRequired,
  animation: PropTypes.object,
  animationScale: PropTypes.number,
  children: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
    PropTypes.node,
  ]),