/** Instant skeleton while MacroVibesPage fetches indicator data. */
export default function MacroLoading() {
  return (
    <div className="page">
      <div className="page-head" style={{ marginBottom: 24 }}>
        <div>
          <div className="skeleton sk-title" style={{ width: 160, marginBottom: 8 }} />
          <div className="skeleton sk-line" style={{ width: 300 }} />
        </div>
      </div>
      {/* Composite score card */}
      <div className="skeleton-card" style={{ marginBottom: 16, padding: 24 }}>
        <div className="skeleton sk-line" style={{ width: 120, marginBottom: 16 }} />
        <div className="skeleton" style={{ height: 48, width: 200, marginBottom: 16 }} />
        <div className="skeleton" style={{ height: 24, width: '100%', borderRadius: 12 }} />
      </div>
      {/* 8-indicator grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {Array.from({ length: 8 }).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: 36, width: 100, marginBottom: 8 }} />
            <div className="skeleton sk-line-sm sk-w-3q" />
          </div>
        ))}
      </div>
    </div>
  )
}