Skeleton Loader

() => {
  const [isLoading, setIsLoading] = useState(true)

  // Simulate loading 
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 3000)
    return () => clearTimeout(timer)
  }, [isLoading])

  // This would typically be in a seperate [name].skeleton.tsx file
  const StyleguideSkeleton = () => (
    <SkeletonLoader width={1} flexDirection="column" gap={3}>
      <Flex flexDirection="column" gap={3} width={1}>
        <SkeletonCircle width={30} height={30} />
        <SkeletonRectangle width={2 / 4} height={30} />
      </Flex>
      <Flex flexDirection="column" gap={3} width={1}>
        <SkeletonCircle width={30} height={30} />
        <SkeletonRectangle width={2 / 4} height={30} />
      </Flex>
      <Flex flexDirection="column" gap={3} width={1}>
        <SkeletonRectangle width={'60px'} height={30} />
      </Flex>
    </SkeletonLoader>
  )

  if (isLoading) return <StyleguideSkeleton />

  return (
    <Flex width={1} flexDirection="column" gap={3}>
      <Flex flexDirection="column" gap={3} width={1}>
        <H4>Here is some content</H4>
      </Flex>
      <Flex flexDirection="column" gap={3} width={1}>
        <H4>Here is some more content</H4>
      </Flex>
      <Flex flexDirection="column" gap={3} width={1}>
        <Button onClick={() => setIsLoading(true)}>Reload</Button>
      </Flex>
    </Flex>
  )
}