// Loading placeholder for the dashboard — shapes roughly match the real
// layout (tiles/chart/panels) so the page doesn't jump around once data
// arrives.

function Bar({ width, height = 16 }: { width: string; height?: number }) {
  return <div className="skeleton" style={{ width, height }} />;
}

export function DashboardSkeleton() {
  return (
    <div className="wrap" aria-busy="true" aria-label="Loading dashboard">
      <header className="top" style={{ gap: 12 }}>
        <Bar width="220px" height={22} />
        <Bar width="120px" height={24} />
      </header>
      <div style={{ marginTop: 10, marginBottom: 18 }}>
        <Bar width="60%" height={13} />
      </div>
      <div className="tiles">
        {[0, 1, 2, 3].map((i) => (
          <div className="tile" key={i}>
            <Bar width="70%" height={13} />
            <div style={{ marginTop: 8, marginBottom: 6 }}>
              <Bar width="80%" height={26} />
            </div>
            <Bar width="50%" height={12} />
          </div>
        ))}
      </div>
      <div className="card" style={{ marginBottom: 12 }}>
        <Bar width="220px" height={14} />
        <div style={{ marginTop: 10 }}>
          <Bar width="100%" height={220} />
        </div>
      </div>
      <div className="grid2">
        <div className="card">
          <Bar width="180px" height={14} />
          <div style={{ marginTop: 12 }}>
            <Bar width="100%" height={140} />
          </div>
        </div>
        <div className="card">
          <Bar width="140px" height={14} />
          <div style={{ marginTop: 12 }}>
            <Bar width="100%" height={140} />
          </div>
        </div>
      </div>
    </div>
  );
}
