From bdab9f9f15a8491a99fd65fb703e6b6d94a2285f Mon Sep 17 00:00:00 2001
From: Devin <devin@cognition.ai>
Date: Mon, 4 May 2026 16:44:51 +0000
Subject: [PATCH] refactor(web): adopt <DataState> in routine panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap the routine calendar skeleton/panel branch in
`apps/web/src/modules/routine/RoutineTimeline.tsx` with the unified
<DataState> wrapper so the habit-pending loading swap flows through the
same loading contract as finyk (PR 2.4), fizruk (PR 2.5) and nutrition
(PR 2.6) — initiative 0011 PR 2.7.

Visible behaviour is preserved across all four (mainTab, isHabitPending)
combinations:

- calendar + pending → 4x SkeletonHabitRow shimmer (exactly as before).
- calendar + idle    → <RoutineCalendarPanel hidden={false} />.
- stats    + pending → <RoutineCalendarPanel hidden={true} /> (panel
  stays mounted, preserving its internal state).
- stats    + idle    → <RoutineCalendarPanel hidden={true} />.

Mapping: `calendarBusy = isHabitPending && mainTab === 'calendar'`,
`query.data = calendarBusy ? undefined : true` — DataState only
renders the skeleton slot when data is undefined, so the calendar panel
remains mounted on the stats tab even while a habit mutation is
pending, just like before. Stats branch is untouched.
---
 .../src/modules/routine/RoutineTimeline.tsx   | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/modules/routine/RoutineTimeline.tsx b/apps/web/src/modules/routine/RoutineTimeline.tsx
index 4952d0749..9077c4dd8 100644
--- a/apps/web/src/modules/routine/RoutineTimeline.tsx
+++ b/apps/web/src/modules/routine/RoutineTimeline.tsx
@@ -8,6 +8,10 @@
  */
 
 import { Banner } from "@shared/components/ui/Banner";
+import {
+  DataState,
+  type DataStateQueryLike,
+} from "@shared/components/ui/DataState";
 import { PullToRefresh } from "@shared/components/ui/PullToRefresh";
 import { SectionErrorBoundary } from "@shared/components/ui/SectionErrorBoundary";
 import { SkeletonHabitRow } from "@shared/components/ui/Skeleton";
@@ -46,6 +50,25 @@ export function RoutineTimeline({
   onPullRefresh,
   onPullRefreshError,
 }: RoutineTimelineProps) {
+  const calendarBusy = isHabitPending && mainTab === "calendar";
+  const calendarQuery: DataStateQueryLike<true> = {
+    data: calendarBusy ? undefined : (true as const),
+    isLoading: calendarBusy,
+  };
+
+  const calendarLoadingSkeleton = (
+    <div className="px-4 pt-2 space-y-2 motion-safe:animate-pulse">
+      {[0, 1, 2, 3].map((i) => (
+        <SkeletonHabitRow
+          key={i}
+          shimmer
+          module="routine"
+          style={{ animationDelay: `${i * 40}ms` }}
+        />
+      ))}
+    </div>
+  );
+
   return (
     <div className="flex-1 overflow-hidden flex flex-col min-h-0">
       <PullToRefresh
@@ -84,20 +107,12 @@ export function RoutineTimeline({
             actions={calendarActions}
           >
             <SectionErrorBoundary title="Не вдалось показати «Календар»">
-              {isHabitPending && mainTab === "calendar" ? (
-                <div className="px-4 pt-2 space-y-2 motion-safe:animate-pulse">
-                  {[0, 1, 2, 3].map((i) => (
-                    <SkeletonHabitRow
-                      key={i}
-                      shimmer
-                      module="routine"
-                      style={{ animationDelay: `${i * 40}ms` }}
-                    />
-                  ))}
-                </div>
-              ) : (
-                <RoutineCalendarPanel hidden={mainTab !== "calendar"} />
-              )}
+              <DataState
+                query={calendarQuery}
+                skeleton={calendarLoadingSkeleton}
+              >
+                {() => <RoutineCalendarPanel hidden={mainTab !== "calendar"} />}
+              </DataState>
             </SectionErrorBoundary>
           </RoutineCalendarProvider>