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/components/duty/DutyList.tsx

@@ -64,8 +64,8 @@ export interface DutyListProps {
 export function DutyList({ scrollMarginTop = 268, className }: DutyListProps) {
   const { t } = useTranslation();
   const listRef = useRef<HTMLDivElement>(null);
-  const { currentMonth, duties } = useAppStore(
-    useShallow((s) => ({ currentMonth: s.currentMonth, duties: s.duties }))
+  const { currentMonth, duties, loading } = useAppStore(
+    useShallow((s) => ({ currentMonth: s.currentMonth, duties: s.duties, loading: s.loading }))
   );
 
   const { filtered, dates, dutiesByDateKey } = useMemo(() => {
@@ -142,8 +142,14 @@ export function DutyList({ scrollMarginTop = 268, className }: DutyListProps) {
   if (filtered.length === 0) {
     return (
       <div className={cn("flex flex-col gap-1", className)}>
-        <p className="text-sm text-muted m-0">{t("duty.none_this_month")}</p>
-        <p className="text-xs text-muted m-0">{t("duty.none_this_month_hint")}</p>
+        {loading ? (
+          <p className="text-sm text-muted m-0">{t("loading")}</p>
+        ) : (
+          <>
+            <p className="text-sm text-muted m-0">{t("duty.none_this_month")}</p>
+            <p className="text-xs text-muted m-0">{t("duty.none_this_month_hint")}</p>
+          </>
+        )}
       </div>
     );
   }