Skeletons
Skeletons provide a mock visual layout of a components contents while that component is loading.
This example demonstrates each of the Skeleton sub-components. The pulsing is achieved using the Tailwind CSS out of the box
'animate-pulse'
 utility class.
...
...
...
...
...
...
...
<div className="flex w-48">
  <Skeleton>
    <SkeletonPanel>
      <SkeletonRow>
        <SkeletonColumn>
          <SkeletonImage />
        </SkeletonColumn>
        <SkeletonColumn>
          <SkeletonTextLines>
            <SkeletonTextLine />
            <SkeletonTextLine />
            <SkeletonTextLine />
            <SkeletonTextLine />
          </SkeletonTextLines>
        </SkeletonColumn>
      </SkeletonRow>
      <SkeletonRow>
        <SkeletonTextLine className="w-1/2" />
      </SkeletonRow>
      <SkeletonRow>
        <SkeletonTextLine className="w-3/4" />
        <SkeletonButton className="w-1/4" />
      </SkeletonRow>
    </SkeletonPanel>
  </Skeleton>
</div>

FUTORO