カレンダーの月切替・初回ロード時のローディング表示を改善

[hirokisakabe]

Status: Ready

Depends on: #164

概要

Web カレンダーの初回ロードと月切り替え時で、データ取得状態に適したローディング表示を出し分ける。

背景 / モチベーション

現在は isLoading 中にカレンダー全体の opacity を下げるだけで、取得中であることが分かりにくい。また、初回ロードと、既存データを維持できる月切り替え時では適切なフィードバックが異なる。

#164 で直前データを維持できるようにした上で、初回は明確なローディング、月切り替え時は操作を妨げない取得中表示にする。

受け入れ条件

• 初回ロードで表示可能なタスクデータがない間は、カレンダー領域に明確なローディング表示が出る
• 初回ロード中もカレンダー領域の大きさが安定し、大きなレイアウトシフトが起きない
• 月切り替え時は 月切り替え時も直前のタスク表示を維持する #164 の直前データを維持しつつ、非ブロッキングな取得中表示が出る
• 月切り替え時にカレンダー全体を一律に薄くして可読性を落とさない
• 取得完了後はローディング表示が消え、新しい範囲のタスクが表示される
• 取得失敗時はローディング表示が残り続けず、既存のエラー処理と両立する
• ローディング状態が支援技術にも伝わる（role="status"、aria-live 等）
• 初回ロード・月切り替え・取得失敗の挙動を自動テストで確認できる
• lint・format-check・typecheck・test が成功する

スコープ外

• スケルトン UI の導入
• API のレスポンス速度改善
• Mobile のローディング UI
• query 永続化

実装メモ

• 主な対象: apps/web/src/components/Calendar.tsx
• 初回ロードは isPending / isLoading、再取得は isFetching、placeholder 表示中は isPlaceholderData を使い分ける
• 月切り替え時も直前のタスク表示を維持する #164 の実装後の query state を前提にする

完了形

実装 PR を作成し、上記の受け入れ条件を満たした時点で完了とする。

参考

• 月切り替え時も直前のタスク表示を維持する #164
• TanStack Query: Background Fetching Indicators