Skeleton

Shows a component in a loading state as an alternative to loading indicators.
<x-skeleton> is designed to take the same space as the loaded component on the page, and show placeholders of the child components.

<div class="bg-base-100 p-2 grid grid-cols-[auto_auto] items-center gap-x-4 gap-y-1">
  <div class="row-span-2 h-16 w-16 relative"> <!-- Skeleton avatar -->
	<x-skeleton class="absolute w-full h-full rounded-full"/>
	<x-icon class="absolute w-full h-full" name="heroicon-o-user"/>
  </div>
  <x-skeleton class="p-1 font-normal">I'm loading</x-skeleton>
  <x-skeleton class="p-1 h-6 w-40"/>
  
  <x-skeleton class="col-span-full h-32"/>
</div>

By default, <x-skeleton> renders as a simple rectangle on the page, with a background animation, but if you insert text inside it, the text itself is rendered with the same animation.
The size and shape are determined by the layout (grid, flex, ...) and the use of w-*, h-*, size-*, rounded-*, ... classes.