From 96a5b00b99e24d7a250f94a649c1205057f0a51f Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 13 Mar 2026 22:00:44 +0100
Subject: [PATCH] Fix sparklines not rendering on initial page load in Chromium

Replace useId() with colon-free ref-based ID generator to avoid SVG
url() gradient resolution failures, and add placeholderData to
timeseries query to prevent flash during refetch.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/api/queries/executions.ts       | 1 +
 ui/src/components/shared/Sparkline.tsx | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/src/api/queries/executions.ts b/ui/src/api/queries/executions.ts
index e9b9419b..974d7510 100644
--- a/ui/src/api/queries/executions.ts
+++ b/ui/src/api/queries/executions.ts
@@ -46,6 +46,7 @@ export function useStatsTimeseries(timeFrom: string | undefined, timeTo: string
       return data!;
     },
     enabled: !!timeFrom,
+    placeholderData: (prev) => prev,
     refetchInterval: 30_000,
   });
 }
diff --git a/ui/src/components/shared/Sparkline.tsx b/ui/src/components/shared/Sparkline.tsx
index c6583cde..025e7a36 100644
--- a/ui/src/components/shared/Sparkline.tsx
+++ b/ui/src/components/shared/Sparkline.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useId } from 'react';
+import { useMemo, useRef } from 'react';
 
 interface SparklineProps {
   data: number[];
@@ -6,7 +6,8 @@ interface SparklineProps {
 }
 
 export function Sparkline({ data, color }: SparklineProps) {
-  const gradientId = useId();
+  const gradientIdRef = useRef('spark-' + Math.random().toString(36).slice(2, 9));
+  const gradientId = gradientIdRef.current;
 
   // Drop first and last buckets — they are partial time windows and skew the trend
   const trimmed = useMemo(() => (data.length > 4 ? data.slice(1, -1) : data), [data]);