refactor: drop server-seeded widget clock

The WidgetTimeProvider plumbed a server timestamp and the container's
timezone down to useWidgetNow so clock widgets would paint a real time in
the SSR HTML instead of "--:--". That traded a cosmetic first-paint win for
a wrong clock: the seeded timezone is the server's, so anyone whose timezone
differs from the container's saw an incorrect time for the whole hydration
window. Fixing that properly needs a client-set timezone cookie read during
RSC render, which is far more plumbing than the problem warrants.

Revert the clock to release/v2 behaviour ("--:--" until hydration) and drop
the provider, the @homarr/widgets/time export and their tests. The e2e clock
assertions now wait on hydration explicitly instead of the seeded paint.

Also restore the widget.beszel.getSystemStats persistence exclusion. #6289
added it deliberately to keep those large time-series payloads out of the
persisted cache, and this branch had removed it with no stated rationale.

Query-cache persistence and the background-refresh indicator are unchanged.
This commit is contained in:
Thomas Camlong authored and Thomas Camlong committed 2026-08-23 09:00:34 +02:00
1 parent 3efb719eee
commit 240397e7ac
13 files changed
+64 -150

No files matched your search

@@ -9,7 +9,6 @@ import { useEditMode } from "@homarr/boards/edit-mode";
import { getRepresentativeLayoutWidth } from "@homarr/boards/layout-preview";
import { useI18n } from "@homarr/translation/client";
import { FloatingTip } from "@homarr/ui";
import { WidgetTimeProvider } from "@homarr/widgets/time";
import { BoardAdvancedFocusProvider } from "~/components/board/advanced-focus/context";
import { BoardEmptyState } from "~/components/board/board-empty-state";
@@ -40,13 +39,7 @@ const BoardSelectionGridProvider = ({ children }: PropsWithChildren) => (
</GridEditorRegistryProvider>
);
export const ClientBoard = ({
initialTimestamp,
initialTimeZone,
}: {
initialTimestamp: number;
initialTimeZone: string;
}) => {
export const ClientBoard = () => {
const board = useRequiredBoard();
const t = useI18n("board.landmark");
const tPreview = useI18n("board.setting.section.layout.preview");
@@ -162,27 +155,23 @@ export const ClientBoard = ({
</BoardSelectionGridProvider>
);
if (representativeWidth === null) return content;
return (
<WidgetTimeProvider initialTimestamp={initialTimestamp} initialTimeZone={initialTimeZone}>
{representativeWidth === null ? (
content
) : (
<Stack align="center" gap="xs" p="md" mih="100%">
<Text size="xs" c="dimmed" fw={500}>
{tPreview("editorWidthLabel", { layoutName: currentLayout.name, width: representativeWidth })}
</Text>
<Paper
withBorder
shadow="sm"
radius="md"
w={`min(${representativeWidth}px, calc(100vw - 2rem))`}
mih="calc(100dvh - 8rem)"
style={{ overflow: "hidden" }}
>
{content}
</Paper>
</Stack>
)}
</WidgetTimeProvider>
<Stack align="center" gap="xs" p="md" mih="100%">
<Text size="xs" c="dimmed" fw={500}>
{tPreview("editorWidthLabel", { layoutName: currentLayout.name, width: representativeWidth })}
</Text>
<Paper
withBorder
shadow="sm"
radius="md"
w={`min(${representativeWidth}px, calc(100vw - 2rem))`}
mih="calc(100dvh - 8rem)"
style={{ overflow: "hidden" }}
>
{content}
</Paper>
</Stack>
);
};
@@ -96,10 +96,7 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
return (
<HydrationBoundary state={dehydrate(queryClient)}>
<IntegrationProvider integrations={integrations}>
<ClientBoard
initialTimestamp={Date.now()}
initialTimeZone={Intl.DateTimeFormat().resolvedOptions().timeZone}
/>
<ClientBoard />
</IntegrationProvider>
</HydrationBoundary>
);