/** Instant skeleton shown by Next.js while TrumpPage compiles / fetches. */
export default function TrumpLoading() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="skeleton sk-title" style={{ width: 180, marginBottom: 8 }} />
          <div className="skeleton sk-line" style={{ width: 320 }} />
        </div>
      </div>
      <div className="post-stream" style={{ marginTop: 16 }}>
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="skeleton-card" style={{ marginBottom: 8 }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <div className="skeleton sk-line sk-w-q" />
              <div className="skeleton sk-line" style={{ width: 60 }} />
            </div>
            <div className="skeleton sk-title sk-w-3q" />
            <div className="skeleton sk-line sk-w-full" />
            <div className="skeleton sk-line sk-w-half" />
          </div>
        ))}
      </div>
    </div>
  )
}