From 9d3d40d4bd37ba89bd066d0d8cc1ef18cc8a5396 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 01:08:01 +0200
Subject: [PATCH] fix(e2e): stabilize initial board hydration

---
 e2e/lazy-widgets.spec.ts                 |  5 ++++-
 packages/widgets/src/clock/component.tsx | 12 +++---------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/e2e/lazy-widgets.spec.ts b/e2e/lazy-widgets.spec.ts
index a406cfa6e..76041981f 100644
--- a/e2e/lazy-widgets.spec.ts
+++ b/e2e/lazy-widgets.spec.ts
@@ -88,8 +88,11 @@ describe("lazy widget application graph", () => {
       );
       await expect(clockWidget).toBeVisible({ timeout: 15_000 });
 
+      await expect(page.locator("[data-homarr-dev-benchmark-spotlight-preloaded]")).toHaveCount(1, {
+        timeout: 15_000,
+      });
       await page.keyboard.press("Control+K");
-      await expect(page.locator("[data-homarr-dev-benchmark-spotlight]")).toBeVisible();
+      await expect(page.locator("[data-homarr-dev-benchmark-spotlight]")).toBeVisible({ timeout: 15_000 });
       await page.keyboard.press("Escape");
       await expect(page.locator("[data-homarr-dev-benchmark-spotlight]")).not.toBeVisible();
 
diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx
index c95f93db7..05837a5e5 100644
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -43,19 +43,13 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
             {options.customTitle}
           </Text>
         )}
-        <Title
-          className="clock-time-text"
-          fw={700}
-          order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6}
-          lh="1"
-          suppressHydrationWarning
-        >
+        <Title className="clock-time-text" fw={700} order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6} lh="1">
           {options.customTimeFormat
             ? dayjs(time).tz(timezone).format(customTimeFormat)
             : dayjs(time).tz(timezone).format(timeFormat)}
         </Title>
         {options.showDate && (
-          <Text className="clock-date-text" size={sizing} lineClamp={1} suppressHydrationWarning>
+          <Text className="clock-date-text" size={sizing} lineClamp={1}>
             {options.customDateFormat
               ? dayjs(time).tz(timezone).format(customDateFormat)
               : dayjs(time).tz(timezone).format(dateFormat)}
@@ -96,7 +90,7 @@ interface UseCurrentTimeProps {
 }
 
 const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
-  const [time, setTime] = useState(new Date());
+  const [time, setTime] = useState(() => new Date(0));
   const timeoutRef = useRef<NodeJS.Timeout>(null);
   const intervalRef = useRef<NodeJS.Timeout>(null);
   const intervalMultiplier = useMemo(() => (showSeconds ? 1 : 60), [showSeconds]);