Skeleton

import { Skeleton } from '@raystack/apsara';

<Skeleton />

<Skeleton count={3} />

<Skeleton width={200} height={20} />

<Skeleton width="100%" height="200px" />

<div>
  <Skeleton inline width={100} /> is loading...
</div>

<Skeleton borderRadius={"var(--rs-radius-4)"} width={200} height={200} />

<Skeleton borderRadius="50%" width={48} height={48} />

<Skeleton enableAnimation={false} />

<Skeleton duration={2.5} />

<Skeleton 
  baseColor="#e0e0e0" 
  highlightColor="#f5f5f5" 
/>

import { Card, Flex } from '@raystack/apsara';

function CardSkeleton() {
  return (
    <Card>
      <Flex direction="column" gap="3">
        <Skeleton width={48} height={48} borderRadius="50%" />
        <Skeleton width="60%" height={24} />
        <Skeleton count={3} />
      </Flex>
    </Card>
  );
}

function ListSkeleton() {
  return (
    <div>
      {[...Array(5)].map((_, i) => (
        <Flex key={i} gap="3" align="center" style={{ marginBottom: '1rem' }}>
          <Skeleton width={40} height={40} borderRadius="50%" />
          <div style={{ flex: 1 }}>
            <Skeleton width="80%" />
            <Skeleton width="60%" />
          </div>
        </Flex>
      ))}
    </div>
  );
}

function TableSkeleton() {
  return (
    <table style={{ width: '100%' }}>
      <thead>
        <tr>
          <th><Skeleton width="100%" /></th>
          <th><Skeleton width="100%" /></th>
          <th><Skeleton width="100%" /></th>
        </tr>
      </thead>
      <tbody>
        {[...Array(5)].map((_, i) => (
          <tr key={i}>
            <td><Skeleton /></td>
            <td><Skeleton /></td>
            <td><Skeleton /></td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ProfileSkeleton() {
  return (
    <Flex direction="column" align="center" gap="4">
      <Skeleton width={120} height={120} borderRadius="50%" />
      <Skeleton width={200} height={28} />
      <Skeleton width={300} height={20} />
      <Skeleton width="100%" height={100} />
    </Flex>
  );
}

<Skeleton.Provider 
  baseColor="#e0e0e0" 
  highlightColor="#f5f5f5"
  duration={2}
>
  <Skeleton width={200} />
  <Skeleton width={300} />
  <Skeleton width={150} />
</Skeleton.Provider>

function UserProfile() {
  const { user, isLoading } = useUser();

  if (isLoading) {
    return (
      <div>
        <Skeleton width={48} height={48} borderRadius="50%" />
        <Skeleton width={200} height={24} />
        <Skeleton count={2} />
      </div>
    );
  }

  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </div>
  );
}