loading.tsx

import { BOARD_COLUMN_STATUSES } from '@/constants/task';
import { messages } from '@/i18n';

/** Instant skeleton shown while the board's server component fetches. */
export default function BoardLoading() {
  return (
    <>
      <div className="board-toolbar">
        <h1 style={{ margin: 0, fontSize: 22 }}>{messages.board.title}</h1>
      </div>
      <div className="board-columns" aria-hidden="true">
        {BOARD_COLUMN_STATUSES.map((status) => (
          <section className="column" key={status}>
            <header className="column-header">
              <span className="column-name">
                <span className={`column-dot column-dot--${status}`} />
                {messages.columns[status]}
              </span>
            </header>
            <div className="column-list">
              <div className="skeleton-card" />
              <div className="skeleton-card" />
            </div>
          </section>
        ))}
      </div>
    </>
  );
}