xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

fix: run card collapse flicker — auto-expand only on first load, not on every re-render

Browse source 
The load callback had expandedRunId in its dependency array, so collapsing
(setting expandedRunId=null) triggered a reload which re-expanded it.
Replaced with a useRef flag that fires once.
This commit is contained in:
jlightner 2026-04-03 08:21:51 +00:00
parent 906b6491fe
commit ff351b38d7
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/pages/AdminPipeline.tsx
View file

@ -709,6 +709,7 @@ function RunList({ videoId, videoStatus }: { videoId: string; videoStatus: strin
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [expandedRunId, setExpandedRunId] = useState<string | null>(null); const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
const [showLegacy, setShowLegacy] = useState(false); const [showLegacy, setShowLegacy] = useState(false);
const hasAutoExpanded = useRef(false);
const load = useCallback(async (silent = false) => { const load = useCallback(async (silent = false) => {
if (!silent) setLoading(true); if (!silent) setLoading(true);
@ -716,17 +717,18 @@ function RunList({ videoId, videoStatus }: { videoId: string; videoStatus: strin
const res = await fetchPipelineRuns(videoId); const res = await fetchPipelineRuns(videoId);
setRuns(res.items); setRuns(res.items);
setLegacyCount(res.legacy_event_count); setLegacyCount(res.legacy_event_count);
// Auto-expand the latest run on first load // Auto-expand the latest run only on first load
if (!silent && res.items.length > 0 && expandedRunId === null) { if (!hasAutoExpanded.current && res.items.length > 0) {
const firstRun = res.items[0]; const firstRun = res.items[0];
if (firstRun) setExpandedRunId(firstRun.id); if (firstRun) setExpandedRunId(firstRun.id);
hasAutoExpanded.current = true;
} }
} catch { } catch {
// silently fail // silently fail
} finally { } finally {
if (!silent) setLoading(false); if (!silent) setLoading(false);
} }
}, [videoId, expandedRunId]); }, [videoId]);
useEffect(() => { useEffect(() => {
void load(); void load();