Skeleton

Skeleton loading state guide for your application.

Skeleton Component

Skeleton

Inside the Dashboard component, the Skeleton component can be used to indicate loading states for various sections of the UI. For example, while data is being fetched for the data list, you can display a skeleton loader in place of the actual content.

<div className="max-w-[300px] w-full flex items-center gap-3 mb-8 ml-4 mt-4">
    <div>
        <Skeleton className="flex rounded-full w-7 h-7" />
    </div>
    <div className="w-full flex flex-col gap-2">
        <Skeleton className="ml-1 h-8 w-4/5 rounded-lg" />
    </div>
</div>