/** Instant skeleton while KolPage fetches posts and digest. */
export default function KolLoading() {
  return (
    <div className="page">
      <div className="page-head" style={{ marginBottom: 24 }}>
        <div>
          <div className="skeleton sk-title" style={{ width: 140, marginBottom: 8 }} />
          <div className="skeleton sk-line" style={{ width: 260 }} />
        </div>
      </div>
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="skeleton-card" style={{ marginBottom: 10, padding: 18 }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 10 }}>
            <div className="skeleton" style={{ width: 36, height: 36, borderRadius: '50%', flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <div className="skeleton sk-line" style={{ width: 120, marginBottom: 6 }} />
              <div className="skeleton sk-line-sm" style={{ width: 80 }} />
            </div>
            <div className="skeleton sk-line" style={{ width: 60 }} />
          </div>
          <div className="skeleton sk-line sk-w-full" style={{ marginBottom: 6 }} />
          <div className="skeleton sk-line sk-w-3q" />
        </div>
      ))}
    </div>
  )
}