feat: enhance CalendarPage and DutyList components for improved loading state handling

- Removed the loading state placeholder from CalendarPage, directly rendering the CalendarGrid component.
- Updated DutyList to display a loading message when data is being fetched, enhancing user experience during data loading.
- Introduced a new dataForMonthKey in the app store to manage month-specific data more effectively.
- Refactored useMonthData hook to reset duties and calendarEvents when a new month is detected, ensuring accurate data representation.
- Added tests to verify the new loading state behavior in both components.

webapp-next/src/hooks/use-month-data.ts

@@ -70,6 +70,9 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
 
     const store = useAppStore.getState();
     const currentMonthNow = store.currentMonth;
+    const monthKey = `${currentMonthNow.getFullYear()}-${String(currentMonthNow.getMonth() + 1).padStart(2, "0")}`;
+    const dataForMonthKey = store.dataForMonthKey;
+    const isNewMonth = dataForMonthKey !== monthKey;
 
     if (abortRef.current) abortRef.current.abort();
     abortRef.current = new AbortController();
@@ -80,6 +83,9 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
       accessDeniedDetail: null,
       loading: true,
       error: null,
+      ...(isNewMonth
+        ? { duties: [], calendarEvents: [], dataForMonthKey: null }
+        : {}),
     });
 
     const first = firstDayOfMonth(currentMonthNow);
@@ -107,6 +113,7 @@ export function useMonthData(options: UseMonthDataOptions): { retry: () => void
         useAppStore.getState().batchUpdate({
           duties: dutiesInMonth,
           calendarEvents: events,
+          dataForMonthKey: monthKey,
           loading: false,
           error: null,
         });