Throttle dump-progress updates to one per animation frame

src/hooks/use-dump-job.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import type {
   DeviceDriver,
   SystemHandler,
@@ -10,25 +10,59 @@ import type {
 } from "@/lib/types";
 import { DumpJobImpl } from "@/lib/core/dump-job";
 
-export function useDumpJob(log: (msg: string, level?: "info" | "warn" | "error") => void) {
+export function useDumpJob(
+  log: (msg: string, level?: "info" | "warn" | "error") => void,
+) {
   const [state, setState] = useState<DumpJobState>("idle");
   const [progress, setProgress] = useState<DumpProgress | null>(null);
   const [result, setResult] = useState<DumpResult | null>(null);
   const [error, setError] = useState<string | null>(null);
   const abortRef = useRef<AbortController | null>(null);
+  const pendingProgressRef = useRef<DumpProgress | null>(null);
+  const rafIdRef = useRef<number | null>(null);
+
+  // Coalesce rapid progress events to one render per animation frame. PS1
+  // dumps fire ~1024 events in well under a second; without throttling the
+  // concurrent renderer keeps interrupting itself and the bar appears stuck.
+  const setProgressThrottled = useCallback((p: DumpProgress) => {
+    pendingProgressRef.current = p;
+    if (rafIdRef.current !== null) return;
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      const latest = pendingProgressRef.current;
+      pendingProgressRef.current = null;
+      if (latest) setProgress(latest);
+    });
+  }, []);
+
+  const cancelPendingProgress = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    pendingProgressRef.current = null;
+  }, []);
+
+  useEffect(() => () => cancelPendingProgress(), [cancelPendingProgress]);
 
   const run = useCallback(
-    async (driver: DeviceDriver, system: SystemHandler, values: ConfigValues, verificationDb?: VerificationDB | null) => {
+    async (
+      driver: DeviceDriver,
+      system: SystemHandler,
+      values: ConfigValues,
+      verificationDb?: VerificationDB | null,
+    ) => {
       const job = new DumpJobImpl(driver, system, verificationDb ?? null);
       const abort = new AbortController();
       abortRef.current = abort;
 
+      cancelPendingProgress();
       setResult(null);
       setError(null);
       setProgress(null);
 
       job.on("onStateChange", setState);
-      job.on("onProgress", setProgress);
+      job.on("onProgress", setProgressThrottled);
       job.on("onLog", (msg, level) => log(msg, level));
       job.on("onComplete", setResult);
 
@@ -44,7 +78,7 @@ export function useDumpJob(log: (msg: string, level?: "info" | "warn" | "error")
         abortRef.current = null;
       }
     },
-    [log],
+    [log, setProgressThrottled, cancelPendingProgress],
   );
 
   const abort = useCallback(() => {
@@ -54,11 +88,12 @@ export function useDumpJob(log: (msg: string, level?: "info" | "warn" | "error")
   }, [log]);
 
   const reset = useCallback(() => {
+    cancelPendingProgress();
     setState("idle");
     setProgress(null);
     setResult(null);
     setError(null);
-  }, []);
+  }, [cancelPendingProgress]);
 
   return { state, progress, result, error, run, abort, reset };
 }