From 95f65141e1e67f94711f904d605aa94deea287c9 Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Tue, 3 Mar 2026 16:21:27 +0300
Subject: [PATCH] fix: update loading state handling in CalendarPage and
 DutyList components

- Set isLoading to false in CalendarPage to prevent unnecessary loading indicators.
- Removed the loading spinner from CalendarHeader and adjusted rendering logic in DutyList to show a placeholder when data is not yet loaded for the month.
- Enhanced tests in DutyList to verify behavior when data is empty and when data is loading, ensuring accurate user feedback during data fetching.
---
 webapp-next/src/components/CalendarPage.tsx   |  2 +-
 .../components/calendar/CalendarHeader.tsx    | 22 +-----------
 .../src/components/duty/DutyList.test.tsx     | 13 ++++++-
 webapp-next/src/components/duty/DutyList.tsx  | 35 +++++++++++++------
 4 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/webapp-next/src/components/CalendarPage.tsx b/webapp-next/src/components/CalendarPage.tsx
index 542c992..162a267 100644
--- a/webapp-next/src/components/CalendarPage.tsx
+++ b/webapp-next/src/components/CalendarPage.tsx
@@ -145,7 +145,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
       >
         <CalendarHeader
           month={currentMonth}
-          isLoading={loading}
+          isLoading={false}
           disabled={navDisabled}
           onGoToToday={handleGoToToday}
           onRefresh={retry}
diff --git a/webapp-next/src/components/calendar/CalendarHeader.tsx b/webapp-next/src/components/calendar/CalendarHeader.tsx
index 1bc0c1c..ccda356 100644
--- a/webapp-next/src/components/calendar/CalendarHeader.tsx
+++ b/webapp-next/src/components/calendar/CalendarHeader.tsx
@@ -30,13 +30,6 @@ export interface CalendarHeaderProps {
   className?: string;
 }
 
-const HeaderSpinner = () => (
-  <span
-    className="block size-4 shrink-0 rounded-full border-2 border-transparent border-t-accent motion-reduce:animate-none animate-spin"
-    aria-hidden
-  />
-);
-
 function isCurrentMonth(month: Date): boolean {
   const now = new Date();
   return (
@@ -82,16 +75,6 @@ export function CalendarHeader({
             aria-atomic="true"
           >
             {monthName(monthIndex)} {year}
-            {isLoading && (
-              <span
-                role="status"
-                aria-live="polite"
-                aria-label={t("loading")}
-                className="flex items-center"
-              >
-                <HeaderSpinner />
-              </span>
-            )}
           </h1>
           {showToday && (
             <button
@@ -116,10 +99,7 @@ export function CalendarHeader({
               disabled={disabled || isLoading}
               onClick={onRefresh}
             >
-              <RefreshCwIcon
-                className={cn("size-5", isLoading && "motion-reduce:animate-none animate-spin")}
-                aria-hidden
-              />
+              <RefreshCwIcon className="size-5" aria-hidden />
             </Button>
           )}
           <Button
diff --git a/webapp-next/src/components/duty/DutyList.test.tsx b/webapp-next/src/components/duty/DutyList.test.tsx
index 436bfe9..455c7bf 100644
--- a/webapp-next/src/components/duty/DutyList.test.tsx
+++ b/webapp-next/src/components/duty/DutyList.test.tsx
@@ -35,17 +35,27 @@ describe("DutyList", () => {
     useAppStore.getState().setCurrentMonth(new Date(2025, 1, 1)); // Feb 2025
   });
 
-  it("renders no duties message when duties empty", () => {
+  it("renders no duties message when duties empty and data loaded for month", () => {
     useAppStore.getState().setDuties([]);
+    useAppStore.getState().batchUpdate({ dataForMonthKey: "2025-02" });
     render(<DutyList />);
     expect(screen.getByText(/No duties this month/i)).toBeInTheDocument();
   });
 
+  it("renders quiet placeholder when data not yet loaded for month", () => {
+    useAppStore.getState().setDuties([]);
+    useAppStore.getState().batchUpdate({ dataForMonthKey: null });
+    render(<DutyList />);
+    expect(screen.queryByText(/No duties this month/i)).not.toBeInTheDocument();
+    expect(document.querySelector('[aria-busy="true"]')).toBeInTheDocument();
+  });
+
   it("renders duty with full_name and time range", () => {
     useAppStore.getState().setDuties([
       duty("Иванов", "2025-02-25T09:00:00Z", "2025-02-25T18:00:00Z"),
     ]);
     useAppStore.getState().setCurrentMonth(new Date(2025, 1, 1));
+    useAppStore.getState().batchUpdate({ dataForMonthKey: "2025-02" });
     render(<DutyList />);
     expect(screen.getByText("Иванов")).toBeInTheDocument();
   });
@@ -58,6 +68,7 @@ describe("DutyList", () => {
       }),
     ]);
     useAppStore.getState().setCurrentMonth(new Date(2025, 2, 1));
+    useAppStore.getState().batchUpdate({ dataForMonthKey: "2025-03" });
     render(<DutyList />);
     expect(screen.getAllByText("Alice").length).toBeGreaterThanOrEqual(1);
     expect(document.querySelector('a[href^="tel:"]')).toBeInTheDocument();
diff --git a/webapp-next/src/components/duty/DutyList.tsx b/webapp-next/src/components/duty/DutyList.tsx
index b28b223..08b0230 100644
--- a/webapp-next/src/components/duty/DutyList.tsx
+++ b/webapp-next/src/components/duty/DutyList.tsx
@@ -64,9 +64,15 @@ export interface DutyListProps {
 export function DutyList({ scrollMarginTop = 268, className }: DutyListProps) {
   const { t } = useTranslation();
   const listRef = useRef<HTMLDivElement>(null);
-  const { currentMonth, duties, loading } = useAppStore(
-    useShallow((s) => ({ currentMonth: s.currentMonth, duties: s.duties, loading: s.loading }))
+  const { currentMonth, duties, dataForMonthKey } = useAppStore(
+    useShallow((s) => ({
+      currentMonth: s.currentMonth,
+      duties: s.duties,
+      dataForMonthKey: s.dataForMonthKey,
+    }))
   );
+  const monthKey = `${currentMonth.getFullYear()}-${String(currentMonth.getMonth() + 1).padStart(2, "0")}`;
+  const hasDataForMonth = dataForMonthKey === monthKey;
 
   const { filtered, dates, dutiesByDateKey } = useMemo(() => {
     const filteredList = duties.filter((d) => d.event_type === "duty");
@@ -105,7 +111,6 @@ export function DutyList({ scrollMarginTop = 268, className }: DutyListProps) {
     const id = setInterval(() => setNow(new Date()), 60_000);
     return () => clearInterval(id);
   }, []);
-  const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;
   const scrolledForMonthRef = useRef<string | null>(null);
   const prevScrollMarginTopRef = useRef<number>(scrollMarginTop);
   const prevMonthKeyRef = useRef<string>(monthKey);
@@ -139,17 +144,25 @@ export function DutyList({ scrollMarginTop = 268, className }: DutyListProps) {
     });
   }, [filtered, dates.length, scrollMarginTop, monthKey]);
 
+  if (!hasDataForMonth) {
+    return (
+      <div
+        className={cn("min-h-[120px]", className)}
+        role="status"
+        aria-busy="true"
+        aria-live="polite"
+        aria-label={t("loading")}
+      >
+        <span className="sr-only">{t("loading")}</span>
+      </div>
+    );
+  }
+
   if (filtered.length === 0) {
     return (
       <div className={cn("flex flex-col gap-1", className)}>
-        {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>
-          </>
-        )}
+        <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>
     );
   }