Fix rendering flickering, add keepPreviousData, resolve 38 ESLint warnings

Author: nikolay-e

frontend/src/components/ui/version-info.tsx

@@ -2,9 +2,11 @@ import { cn } from "../../lib/utils";
 
 type Environment = "production" | "staging" | "development";
 
-const environment = (import.meta.env.VITE_APP_ENVIRONMENT ||
-  "development") as Environment;
-const version = import.meta.env.VITE_APP_VERSION || "dev";
+const environment: Environment =
+  (import.meta.env.VITE_APP_ENVIRONMENT as Environment | undefined) ??
+  "development";
+const version: string =
+  (import.meta.env.VITE_APP_VERSION as string | undefined) ?? "dev";
 
 const envStyles: Record<Environment, string> = {
   production: "bg-green-600 text-white",

frontend/src/features/dashboard/DashboardLayout.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect, Suspense } from "react";
 import { NavLink, Outlet } from "react-router-dom";
 import { useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
@@ -19,6 +19,7 @@ import {
   Dumbbell,
 } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { Spinner } from "../../components/ui/spinner";
 import { VersionInfo } from "../../components/ui/version-info";
 import { formatCombinedReport } from "../../lib/report-formatter";
 import { MAX_BASELINE_DAYS } from "../../lib/metrics";
@@ -204,9 +205,15 @@ export function DashboardLayout() {
       </header>
 
       <main className="container py-8 px-4 sm:px-6 lg:px-8">
-        <div className="animate-fade-in">
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center h-96">
+              <Spinner size="lg" />
+            </div>
+          }
+        >
           <Outlet />
-        </div>
+        </Suspense>
       </main>
 
       <footer

frontend/src/features/dashboard/DashboardOverview.tsx

@@ -29,6 +29,7 @@ import {
   Scale,
   Footprints,
   Flame,
+  Loader2,
   type LucideIcon,
 } from "lucide-react";
 import {
@@ -118,7 +119,10 @@ export function DashboardOverview() {
     [startDate, endDate],
   );
 
-  const { data, isLoading, error } = useHealthDataRange(startDate, endDate);
+  const { data, isLoading, isFetching, error } = useHealthDataRange(
+    startDate,
+    endDate,
+  );
   const { data: syncStatus } = useSyncStatus();
   const { isSyncing } = useAutoSync();
 
@@ -238,14 +242,20 @@ export function DashboardOverview() {
               </div>
             );
           }
-          return lastSync ? (
+          return (
             <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <RefreshCw className="h-3.5 w-3.5" />
-              <span>
-                Last sync: {format(new Date(toTimeMs(lastSync)), "PPp")}
-              </span>
+              {isFetching ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" />
+              ) : (
+                lastSync && <RefreshCw className="h-3.5 w-3.5" />
+              )}
+              {lastSync && (
+                <span>
+                  Last sync: {format(new Date(toTimeMs(lastSync)), "PPp")}
+                </span>
+              )}
             </div>
-          ) : null;
+          );
         })()}
       </div>
 

frontend/src/features/dashboard/StatisticsPage.tsx

@@ -67,6 +67,7 @@ import {
   Dumbbell,
   Beaker,
   BarChart3,
+  Loader2,
   type LucideIcon,
 } from "lucide-react";
 import { cn } from "../../lib/utils";
@@ -132,6 +133,47 @@ function getStressTrendColor(value: number | null): string {
   return "text-blue-500";
 }
 
+function getCorrelationColor(value: number | null): string {
+  if (value === null) return "text-muted-foreground";
+  if (value < -0.3) return "text-green-500";
+  if (value > 0) return "text-red-500";
+  return "text-muted-foreground";
+}
+
+function getHrvSdColor(value: number | null): string {
+  if (value === null) return "";
+  if (value < 0.1) return "text-green-500";
+  if (value > 0.15) return "text-red-500";
+  return "";
+}
+
+function getTsbColor(value: number | null): string {
+  if (value === null) return "";
+  if (value > 0) return "text-green-500";
+  if (value < -10) return "text-red-500";
+  return "";
+}
+
+function getAllostaticScoreColor(value: number | null): string {
+  if (value === null) return "text-yellow-500";
+  if (value < 20) return "text-green-500";
+  if (value > 40) return "text-red-500";
+  return "text-yellow-500";
+}
+
+function getDysregulationRateColor(rate: number): string {
+  if (rate > 0.3) return "text-red-500";
+  if (rate > 0.15) return "text-yellow-500";
+  return "text-green-500";
+}
+
+function getCrossCorrelationColor(value: number | null): string {
+  if (value === null) return "";
+  if (value > 0.3) return "text-green-500";
+  if (value < -0.3) return "text-red-500";
+  return "";
+}
+
 interface DataQualityBadgeProps {
   quality: DataQuality;
 }
@@ -346,10 +388,14 @@ export function StatisticsPage() {
     trendWindow,
     useShiftedZScore,
   } = modeConfig;
-  const { data, isLoading, error } = useHealthData(MAX_BASELINE_DAYS, true);
+  const { data, isLoading, isFetching, error } = useHealthData(
+    MAX_BASELINE_DAYS,
+    true,
+  );
   const {
     data: analyticsData,
     isLoading: analyticsLoading,
+    isFetching: analyticsFetching,
     error: analyticsError,
   } = useAnalytics(mode);
   const advancedInsights = analyticsData?.advanced_insights;
@@ -541,7 +587,12 @@ export function StatisticsPage() {
             Personal baseline deviations and trends
           </p>
         </div>
-        <ModeSelector mode={mode} setMode={setMode} />
+        <div className="flex items-center gap-3">
+          {(isFetching || analyticsFetching) && (
+            <Loader2 className="h-4 w-4 animate-spin text-primary" />
+          )}
+          <ModeSelector mode={mode} setMode={setMode} />
+        </div>
       </div>
 
       <Card className="border-2">
@@ -1248,13 +1299,7 @@ export function StatisticsPage() {
                   <span
                     className={cn(
                       "font-mono text-sm",
-                      correlationMetrics.hrvRhrCorrelation !== null &&
-                        correlationMetrics.hrvRhrCorrelation < -0.3
-                        ? "text-green-500"
-                        : correlationMetrics.hrvRhrCorrelation !== null &&
-                            correlationMetrics.hrvRhrCorrelation > 0
-                          ? "text-red-500"
-                          : "text-muted-foreground",
+                      getCorrelationColor(correlationMetrics.hrvRhrCorrelation),
                     )}
                   >
                     {correlationMetrics.hrvRhrCorrelation !== null
@@ -1729,16 +1774,9 @@ export function StatisticsPage() {
                       <span
                         className={cn(
                           "font-mono text-sm",
-                          advancedInsights.hrv_advanced.ln_rmssd_sd_7d !==
-                            null &&
-                            advancedInsights.hrv_advanced.ln_rmssd_sd_7d < 0.1
-                            ? "text-green-500"
-                            : advancedInsights.hrv_advanced.ln_rmssd_sd_7d !==
-                                  null &&
-                                advancedInsights.hrv_advanced.ln_rmssd_sd_7d >
-                                  0.15
-                              ? "text-red-500"
-                              : "",
+                          getHrvSdColor(
+                            advancedInsights.hrv_advanced.ln_rmssd_sd_7d,
+                          ),
                         )}
                       >
                         {advancedInsights.hrv_advanced.ln_rmssd_sd_7d?.toFixed(
@@ -1920,13 +1958,7 @@ export function StatisticsPage() {
                         {advancedInsights.fitness.atl?.toFixed(1) ?? "—"} /{" "}
                         <span
                           className={cn(
-                            advancedInsights.fitness.tsb !== null &&
-                              advancedInsights.fitness.tsb > 0
-                              ? "text-green-500"
-                              : advancedInsights.fitness.tsb !== null &&
-                                  advancedInsights.fitness.tsb < -10
-                                ? "text-red-500"
-                                : "",
+                            getTsbColor(advancedInsights.fitness.tsb),
                           )}
                         >
                           {advancedInsights.fitness.tsb?.toFixed(1) ?? "—"}
@@ -1987,17 +2019,9 @@ export function StatisticsPage() {
                       <span
                         className={cn(
                           "text-2xl font-bold",
-                          advancedInsights.allostatic_load.composite_score !==
-                            null &&
-                            advancedInsights.allostatic_load.composite_score <
-                              20
-                            ? "text-green-500"
-                            : advancedInsights.allostatic_load
-                                  .composite_score !== null &&
-                                advancedInsights.allostatic_load
-                                  .composite_score > 40
-                              ? "text-red-500"
-                              : "text-yellow-500",
+                          getAllostaticScoreColor(
+                            advancedInsights.allostatic_load.composite_score,
+                          ),
                         )}
                       >
                         {advancedInsights.allostatic_load.composite_score?.toFixed(
@@ -2021,11 +2045,7 @@ export function StatisticsPage() {
                         <span
                           className={cn(
                             "font-mono",
-                            rate > 0.3
-                              ? "text-red-500"
-                              : rate > 0.15
-                                ? "text-yellow-500"
-                                : "text-green-500",
+                            getDysregulationRateColor(rate),
                           )}
                         >
                           {(rate * 100).toFixed(0)}%
@@ -2234,13 +2254,7 @@ export function StatisticsPage() {
                           <span
                             className={cn(
                               "font-mono font-medium",
-                              pair.correlation !== null &&
-                                pair.correlation > 0.3
-                                ? "text-green-500"
-                                : pair.correlation !== null &&
-                                    pair.correlation < -0.3
-                                  ? "text-red-500"
-                                  : "",
+                              getCrossCorrelationColor(pair.correlation),
                             )}
                           >
                             {pair.correlation?.toFixed(2) ?? "—"}

frontend/src/features/dashboard/TrainingsPage.tsx

@@ -10,7 +10,14 @@ import {
 } from "../../components/ui/card";
 import { LoadingState } from "../../components/ui/loading-state";
 import { ErrorCard } from "../../components/ui/error-card";
-import { Dumbbell, Calendar, Flame, Activity, Heart } from "lucide-react";
+import {
+  Dumbbell,
+  Calendar,
+  Flame,
+  Activity,
+  Heart,
+  Loader2,
+} from "lucide-react";
 import { format, parseISO } from "date-fns";
 import type {
   WorkoutExerciseDetail,
@@ -431,8 +438,14 @@ function DailyTrainingCard({ day }: { day: DailyTrainings }) {
 export function TrainingsPage() {
   const [periodDays, setPeriodDays] = useState<PeriodDays>(30);
 
-  const { data: workouts, isLoading, error } = useDetailedWorkouts(periodDays);
-  const { data: healthData } = useHealthData(periodDays);
+  const {
+    data: workouts,
+    isLoading,
+    isFetching,
+    error,
+  } = useDetailedWorkouts(periodDays);
+  const { data: healthData, isFetching: healthFetching } =
+    useHealthData(periodDays);
 
   const dailyTrainings = useMemo(() => {
     return groupAllTrainingsByDate(
@@ -458,7 +471,9 @@ export function TrainingsPage() {
               Detailed workout log from Hevy, Garmin, and Whoop
             </p>
           </div>
-          <PeriodSelector period={periodDays} setPeriod={setPeriodDays} />
+          <div className="flex items-center gap-3">
+            <PeriodSelector period={periodDays} setPeriod={setPeriodDays} />
+          </div>
         </div>
         <LoadingState message="Loading workouts..." />
       </div>
@@ -474,7 +489,12 @@ export function TrainingsPage() {
             Detailed workout log from Hevy, Garmin, and Whoop
           </p>
         </div>
-        <PeriodSelector period={periodDays} setPeriod={setPeriodDays} />
+        <div className="flex items-center gap-3">
+          {(isFetching || healthFetching) && (
+            <Loader2 className="h-4 w-4 animate-spin text-primary" />
+          )}
+          <PeriodSelector period={periodDays} setPeriod={setPeriodDays} />
+        </div>
       </div>
 
       {dailyTrainings.length > 0 ? (

frontend/src/hooks/useAnalytics.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { api } from "../lib/api";
 import { healthKeys } from "../lib/query-keys";
 import { HEALTH_DATA_STALE_TIME } from "../lib/constants";
@@ -9,5 +9,6 @@ export function useAnalytics(mode: string = "recent") {
     queryFn: () => api.analytics.get(mode),
     staleTime: HEALTH_DATA_STALE_TIME,
     refetchOnWindowFocus: true,
+    placeholderData: keepPreviousData,
   });
 }

frontend/src/hooks/useDetailedWorkouts.ts

@@ -1,11 +1,8 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { api } from "../lib/api";
 import { format, subDays } from "date-fns";
 import { healthKeys } from "../lib/query-keys";
-import {
-  HEALTH_DATA_STALE_TIME,
-  SYNC_REFETCH_INTERVAL,
-} from "../lib/constants";
+import { HEALTH_DATA_STALE_TIME } from "../lib/constants";
 
 export function useDetailedWorkouts(days: number = 90) {
   const today = new Date();
@@ -16,7 +13,7 @@ export function useDetailedWorkouts(days: number = 90) {
     queryKey: healthKeys.detailedWorkouts(startDate, endDate),
     queryFn: () => api.data.getDetailedWorkouts(startDate, endDate),
     staleTime: HEALTH_DATA_STALE_TIME,
-    refetchInterval: SYNC_REFETCH_INTERVAL,
     refetchOnWindowFocus: true,
+    placeholderData: keepPreviousData,
   });
 }