Skeleton

import { Skeleton } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      <Skeleton shape="text" />
      <Skeleton shape="text-large" />
      <Skeleton shape="circle" />
      <Skeleton shape="rect" />
    </div>
  );
}

import { Skeleton } from '@divistant/circca-react';

export default function Example() {
  return (
    <div aria-busy="true" aria-label="Memuat daftar opportunity" className="grid max-w-md">
      {[0, 1, 2].map(i => (
        <div key={i} className="flex items-center gap-3 border-b border-default py-3 last:border-b-0">
          <Skeleton shape="circle" />
          <div className="grid flex-1 gap-2">
            <Skeleton width="70%" />
            <Skeleton width="40%" />
          </div>
          <Skeleton width={64} />
        </div>
      ))}
    </div>
  );
}

import { useEffect, useState } from 'react';
import { Button, ProgressBar, Skeleton } from '@divistant/circca-react';

export default function Example() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!loading) return;
    const t = setTimeout(() => setLoading(false), 1500);
    return () => clearTimeout(t);
  }, [loading]);

  return (
    <div className="grid max-w-xs gap-3">
      <div aria-busy={loading} aria-live="polite" className="grid gap-3 rounded-xl border border-default bg-default p-4">
        {loading ? (
          <>
            <Skeleton width={120} />
            <Skeleton shape="text-large" width="80%" />
            <Skeleton height={4} width="100%" className="rounded-full" />
          </>
        ) : (
          <>
            <p className="type-caption-default text-muted">PO-2026-0142 · PT Pelanggan Contoh A</p>
            <p className="type-heading-small text-default">Rp 60.000.000 terbayar</p>
            <ProgressBar label="Termin terbayar" value={60} tone="success" />
          </>
        )}
      </div>
      <Button size="sm" onClick={() => setLoading(true)} disabled={loading} className="justify-self-start">
        Muat ulang
      </Button>
    </div>
  );
}