月切り替え時に前のデータを維持する (placeholderData: keepPreviousData)

[hirokisakabe]

概要

カレンダーの月切り替え時、新しい月のデータがフェッチされるまで画面が空（またはローディング表示）になる。keepPreviousData を使い、前の月のデータを表示したままバックグラウンドでフェッチすることで UX を改善する。

現状

• useTasks(year, month) で月が変わると即座に新しいクエリが走る
• フェッチ完了まで isLoading により opacity-50 表示になる

対応方針

useTasks に placeholderData: keepPreviousData を追加する。

import { useQuery, keepPreviousData } from "@tanstack/react-query";

export function useTasks(year: number, month: number) {
  return useQuery({
    queryKey: tasksQueryKey(year, month),
    queryFn: ({ signal }) => fetchTasks(year, month, signal),
    placeholderData: keepPreviousData,
  });
}

isPlaceholderData を使って、フェッチ中であることをナビゲーションボタン等で表示する。

影響範囲

• apps/web/src/hooks/useTasks.ts
• apps/web/src/components/Calendar.tsx（ローディング表示の調整）