cameleer/cameleer-server
1
0
Fork 0
Code Issues 46 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sparklines not rendering on initial page load in Chromium
All checks were successful
CI / build (push) Successful in 1m2s
Details
CI / docker (push) Successful in 48s
Details
CI / deploy (push) Successful in 38s
Details

Browse Source 
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>
This commit is contained in:
hsiegeln
2026-03-13 22:00:44 +01:00
parent cf804638d7
commit 96a5b00b99
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/api/queries/executions.ts
View File

@@ -46,6 +46,7 @@ export function useStatsTimeseries(timeFrom: string | undefined, timeTo: string
return data!; return data!;
}, },
enabled: !!timeFrom, enabled: !!timeFrom,
placeholderData: (prev) => prev,
refetchInterval: 30_000, refetchInterval: 30_000,
}); });
} }

5
ui/src/components/shared/Sparkline.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useId } from 'react'; import { useMemo, useRef } from 'react';
interface SparklineProps { interface SparklineProps {
data: number[]; data: number[];
@@ -6,7 +6,8 @@ interface SparklineProps {
} }
export function Sparkline({ data, color }: 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 // 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]); const trimmed = useMemo(() => (data.length > 4 ? data.slice(1, -1) : data), [data]);