📴 fix: Stop Hidden Code Spinners (#15846)

* fix: keep quote selection updates outside React renders

* fix: stop animating hidden code execution spinners

* test: guard idle transcripts against continuous animations

* test: Assert accepted paste behavior independently of placeholder resize

Author: danny-avila

client/src/components/Chat/Input/QuoteButton.tsx

@@ -1,4 +1,4 @@
-import { memo, useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import { memo, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { TextQuote } from 'lucide-react';
 import { useSetRecoilState } from 'recoil';
@@ -244,7 +244,7 @@ const resolveTop = (anchor: Anchor, height: number, preferBelow: boolean): numbe
  */
 function QuoteButton({ conversationId }: { conversationId: string }) {
   const localize = useLocalize();
-  const [selection, setSelection] = useState<SelectionState | null>(null);
+  const selectionRef = useRef<SelectionState | null>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const rangeRef = useRef<Range | null>(null);
   const clippersRef = useRef<HTMLElement[]>([]);
@@ -255,6 +255,32 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
   const hideRef = useRef<() => void>(() => undefined);
   const setQuotes = useSetRecoilState(store.pendingQuotesByConvoId(conversationId));
 
+  /** Selection and scroll events must not enter React's commit/selection-restoration
+   *  path. Keep the portal mounted and update only its transient presentation. */
+  const presentSelection = useCallback((next: SelectionState | null) => {
+    selectionRef.current = next;
+    const button = buttonRef.current;
+    if (!button) {
+      return;
+    }
+    if (!next) {
+      button.style.display = 'none';
+      return;
+    }
+    const touch = String(next.viaTouch);
+    if (button.dataset.touch !== touch) {
+      button.dataset.touch = touch;
+    }
+    if (button.style.display === 'none') {
+      button.style.display = 'inline-flex';
+    }
+    const { width, height } = button.getBoundingClientRect();
+    const maxLeft = Math.max(EDGE_MARGIN, window.innerWidth - width - EDGE_MARGIN);
+    const left = Math.min(Math.max(anchorCenterX(next.anchor) - width / 2, EDGE_MARGIN), maxLeft);
+    button.style.top = `${resolveTop(next.anchor, height, next.viaTouch)}px`;
+    button.style.left = `${left}px`;
+  }, []);
+
   useEffect(() => {
     let settleTimer: ReturnType<typeof setTimeout> | undefined;
     let frame = 0;
@@ -279,7 +305,7 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
       }
       rangeRef.current = null;
       clippersRef.current = [];
-      setSelection(null);
+      presentSelection(null);
     };
 
     const hide = () => {
@@ -299,18 +325,18 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
         hide();
         return;
       }
-      rangeRef.current = reading.range;
+      /** Native handle drags can mutate the Selection's Range in place. */
+      rangeRef.current = reading.range.cloneRange();
       clippersRef.current = reading.clippers;
-      /** Reuse the previous state object when nothing moved so a redundant
-       *  settle pass costs no render. */
-      setSelection((prev) =>
-        prev &&
-        prev.text === reading.text &&
-        prev.viaTouch === touch &&
-        sameAnchor(prev.anchor, reading.anchor)
-          ? prev
-          : { text: reading.text, anchor: reading.anchor, viaTouch: touch },
-      );
+      const previous = selectionRef.current;
+      if (
+        !previous ||
+        previous.text !== reading.text ||
+        previous.viaTouch !== touch ||
+        !sameAnchor(previous.anchor, reading.anchor)
+      ) {
+        presentSelection({ text: reading.text, anchor: reading.anchor, viaTouch: touch });
+      }
     };
 
     const handlePointerDown = (event: PointerEvent) => {
@@ -382,9 +408,10 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
         hide();
         return;
       }
-      setSelection((prev) =>
-        prev && !sameAnchor(prev.anchor, anchor) ? { ...prev, anchor } : prev,
-      );
+      const previous = selectionRef.current;
+      if (previous && !sameAnchor(previous.anchor, anchor)) {
+        presentSelection({ ...previous, anchor });
+      }
     };
 
     const scheduleReanchor = () => {
@@ -422,29 +449,17 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
       document.removeEventListener('scroll', scheduleReanchor, true);
       window.removeEventListener('resize', scheduleReanchor);
     };
-  }, []);
+  }, [presentSelection]);
 
-  /** Clamp using the button's real size so it never lands off-screen. Apply the
-   *  measured layout directly before paint: feeding it back through state adds
-   *  a synchronous render to every selection update and can exhaust React's
-   *  nested-update limit while the browser is still changing the selection. */
+  /** A parent render (for example a locale change) can change the button size. */
   useLayoutEffect(() => {
-    const button = buttonRef.current;
-    if (!selection || !button) {
-      return;
-    }
-    const { width, height } = button.getBoundingClientRect();
-    const maxLeft = Math.max(EDGE_MARGIN, window.innerWidth - width - EDGE_MARGIN);
-    const left = Math.min(
-      Math.max(anchorCenterX(selection.anchor) - width / 2, EDGE_MARGIN),
-      maxLeft,
-    );
-    const top = resolveTop(selection.anchor, height, selection.viaTouch);
+    presentSelection(selectionRef.current);
+  });
 
-    button.style.top = `${top}px`;
-    button.style.left = `${left}px`;
-    button.style.visibility = 'visible';
-  }, [selection]);
+  useLayoutEffect(() => {
+    pressedTextRef.current = null;
+    hideRef.current();
+  }, [conversationId]);
 
   const commitQuote = useCallback(
     (text: string) => {
@@ -454,18 +469,19 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
       rangeRef.current = null;
       clippersRef.current = [];
       pressedTextRef.current = null;
-      setSelection(null);
+      presentSelection(null);
       window.getSelection()?.removeAllRanges();
       document.getElementById(mainTextareaId)?.focus();
     },
-    [setQuotes],
+    [setQuotes, presentSelection],
   );
 
   const addQuote = useCallback(() => {
+    const selection = selectionRef.current;
     if (selection) {
       commitQuote(selection.text);
     }
-  }, [selection, commitQuote]);
+  }, [commitQuote]);
 
   /**
    * End a touch press that did not commit. While a press is in flight the
@@ -482,16 +498,12 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
     }
   }, []);
 
-  if (!selection) {
-    return null;
-  }
-
   return createPortal(
     <button
       ref={buttonRef}
       type="button"
       /** A tap is also the gesture that dismisses a selection, so `click` can
-       *  never be relied on here: the button is already unmounted by the time it
+       *  never be relied on here: the button can be hidden by the time it
        *  would fire. The excerpt is captured on the press and committed on the
        *  release instead, which keeps a button's normal escape hatches — drag
        *  off the button, or have the gesture stolen by a scroll, and nothing is
@@ -501,7 +513,7 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
           return;
         }
         event.preventDefault();
-        pressedTextRef.current = selection.text;
+        pressedTextRef.current = selectionRef.current?.text ?? null;
         try {
           event.currentTarget.setPointerCapture(event.pointerId);
         } catch {
@@ -539,13 +551,12 @@ function QuoteButton({ conversationId }: { conversationId: string }) {
       style={{
         top: 0,
         left: 0,
-        /** Hidden until measured so it never flashes at an unclamped position. */
-        visibility: 'hidden',
+        display: 'none',
       }}
       className={cn(
         'fixed z-50 inline-flex items-center gap-1.5 rounded-full border border-border-light bg-surface-secondary text-sm font-medium text-text-primary shadow-lg transition-colors hover:bg-surface-tertiary',
         /** Comfortable tap target when the selection came from a finger. */
-        selection.viaTouch ? 'min-h-11 px-4 py-2.5' : 'px-3 py-1.5',
+        'px-3 py-1.5 data-[touch=true]:min-h-11 data-[touch=true]:px-4 data-[touch=true]:py-2.5',
       )}
     >
       <TextQuote className="h-4 w-4" aria-hidden="true" />