/** Instant skeleton while AnalyticsPage loads. */
export default function AnalyticsLoading() {
  return (
    <div className="page">
      <div className="page-head" style={{ marginBottom: 24 }}>
        <div className="skeleton sk-title" style={{ width: 160, marginBottom: 8 }} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12, marginBottom: 20 }}>
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="skeleton-card" style={{ padding: 20 }}>
            <div className="skeleton sk-line sk-w-half" style={{ marginBottom: 12 }} />
            <div className="skeleton" style={{ height: 40, width: 100 }} />
          </div>
        ))}
      </div>
      <div className="skeleton-card" style={{ padding: 24 }}>
        <div className="skeleton sk-line" style={{ width: 140, marginBottom: 16 }} />
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 10 }}>
            <div className="skeleton sk-line" style={{ width: 80 }} />
            <div className="skeleton sk-line" style={{ width: 60 }} />
            <div className="skeleton sk-line sk-w-3q" />
          </div>
        ))}
      </div>
    </div>
  )
}