Skeleton

1<div className="space-y-2">
2  <Skeleton className="h-4 w-[250px]" />
3  <Skeleton className="h-4 w-[200px]" />
4  <Skeleton className="h-4 w-[150px]" />
5</div>

1<Card className="w-[350px]">
2  <CardHeader code="0x00" title="LOADING" />
3  <CardContent className="space-y-2">
4    <Skeleton className="h-4 w-full" />
5    <Skeleton className="h-4 w-full" />
6    <Skeleton className="h-4 w-3/4" />
7  </CardContent>
8</Card>

1<div className="flex items-center space-x-4">
2  <Skeleton className="h-12 w-12" />
3  <div className="space-y-2">
4    <Skeleton className="h-4 w-[200px]" />
5    <Skeleton className="h-4 w-[150px]" />
6  </div>
7</div>

1<div className="space-y-4">
2  {[1, 2, 3].map((i) => (
3    <div key={i} className="flex items-center space-x-4">
4      <Skeleton className="h-12 w-12" />
5      <div className="space-y-2 flex-1">
6        <Skeleton className="h-4 w-full" />
7        <Skeleton className="h-4 w-3/4" />
8      </div>
9    </div>
10  ))}
11</div>

1<div className="space-y-4">
2  <Skeleton className="h-[200px] w-full" />
3  <div className="space-y-2">
4    <Skeleton className="h-4 w-full" />
5    <Skeleton className="h-4 w-4/5" />
6  </div>
7</div>

1<div className="space-y-4">
2  <div className="grid grid-cols-3 gap-4">
3    <Card>
4      <CardContent className="space-y-2">
5        <Skeleton className="h-4 w-20" />
6        <Skeleton className="h-8 w-16" />
7      </CardContent>
8    </Card>
9    {/* More stat cards... */}
10  </div>
11  <Card>
12    <CardHeader code="0x00" title="LOADING" />
13    <CardContent className="space-y-2">
14      <Skeleton className="h-4 w-full" />
15      <Skeleton className="h-4 w-full" />
16      <Skeleton className="h-4 w-3/4" />
17    </CardContent>
18  </Card>
19</div>