fix(studio): a drag on the photo holds the render until the finger lifts

docker/frontend/src/App.tsx

@@ -505,6 +505,12 @@ export function Workspace() {
   const [flipH, setFlipH] = useState(() => session.flipH ?? false);
   const [flipV, setFlipV] = useState(() => session.flipV ?? false);
   const [openParam, setOpenParam] = useState<string | null>(null);
+  // A finger on the photo, moving the open ruler. The look it is moving is not
+  // rendered while the hand is down: a develop and a JPEG is the one thing here
+  // that costs more than a frame, and a render landing between two moves of a
+  // drag is the drag the reader feels. The number the finger stops on is applied
+  // when it lifts, and the render follows it then — one for the whole gesture.
+  const [rulerDragging, setRulerDragging] = useState(false);
   // The HSL mixer: which hue band the ruler edits, whether the eyedropper is
   // armed, and the last colour it read off the photo.
   const [hslBand, setHslBand] = useState<HslBandId>('red');
@@ -1048,6 +1054,11 @@ export function Workspace() {
     // recipe, so a preview behind it would only compete for the same renderer —
     // and the user is watching the live one. It comes back with the camera.
     if (!engine || !previewBytes || shooting) return;
+    // A hand on the photo is a drag of the open ruler, and a drag is not a
+    // moment to render: the value it lands on comes with the finger's own lift,
+    // and this effect runs again then (rulerDragging is a dependency) — so one
+    // render for the whole gesture instead of one in the middle of it.
+    if (rulerDragging) return;
     const token = ++renderToken.current;
     const timer = setTimeout(async () => {
       setBusy(t('act.exporting'));
@@ -1107,7 +1118,7 @@ export function Workspace() {
     }, PREVIEW_DEBOUNCE_MS);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [engine, previewBytes, recipe, preview, frameId, cropEditing, cropLive, cropRect, rotation, straighten, flipH, flipV, useGeotag, gpsInfo, gpsStyle, markOn, markText, markStyle, comparing, shooting]);
+  }, [engine, previewBytes, recipe, preview, frameId, cropEditing, cropLive, cropRect, rotation, straighten, flipH, flipV, useGeotag, gpsInfo, gpsStyle, markOn, markText, markStyle, comparing, shooting, rulerDragging]);
 
   // The source copy behind previewBytes, re-made only when previewMax moves:
   // applying a crop upgrades it, CANCEL/UNDO brings the 1600px one back.
@@ -1444,6 +1455,9 @@ export function Workspace() {
   const sliderEditRef = useRef(false);
   useEffect(() => {
     sliderEditRef.current = false;
+    // A row that is no longer the open one is not being held: whatever gesture
+    // was moving it ended with it.
+    setRulerDragging(false);
   }, [openParam]);
   // The watermark's drag box rides the same one-edit-per-gesture rule as a knob:
   // a whole drag is one undo step, not one per pointer move. The ref clears
@@ -4727,7 +4741,18 @@ export function Workspace() {
           // open no row (see `slider`), and neither hands anything over.
           rulerDrag={
             slider
-              ? { value: slider.value, min: slider.min, max: slider.max, step: slider.step, onChange: slider.onChange }
+              ? {
+                  value: slider.value,
+                  min: slider.min,
+                  max: slider.max,
+                  step: slider.step,
+                  onChange: slider.onChange,
+                  // The gesture's two edges: while the hand is on the photo the
+                  // look is not rendered, and the number it stops on is the one
+                  // that lands (see `rulerDragging`).
+                  onStart: () => setRulerDragging(true),
+                  onEnd: () => setRulerDragging(false),
+                }
               : null
           }
           picking={picking}