feat: implement pending month handling in calendar components

- Introduced a new `pendingMonth` state in the app store to manage month transitions without clearing current data, enhancing user experience during month navigation.
- Updated `useMonthData` hook to load data for the `pendingMonth` when set, preventing empty-frame flicker and ensuring smooth month switching.
- Modified `CalendarPage` and `CalendarGrid` components to utilize the new `pendingMonth` state, improving the rendering logic during month changes.
- Enhanced `DutyList` to display a loading skeleton while data is being fetched, providing better feedback to users.
- Updated relevant tests to cover the new loading behavior and state management for month transitions.

webapp-next/src/components/calendar/CalendarGrid.tsx

@@ -69,13 +69,13 @@ export function CalendarGrid({
       role="grid"
       aria-label="Calendar"
     >
-      {cells.map(({ date, key, month }) => {
+      {cells.map(({ date, key, month }, i) => {
         const isOtherMonth = month !== currentMonth.getMonth();
         const dayDuties = dutiesByDateMap[key] ?? [];
         const eventSummaries = calendarEventsByDateMap[key] ?? [];
 
         return (
-          <div key={key} role="gridcell" className="min-h-0">
+          <div key={`cell-${i}`} role="gridcell" className="min-h-0">
             <CalendarDay
               dateKey={key}
               dayOfMonth={date.getDate()}