Adjust animation/fade timing

Author: alex-rawlings-yyc

src/__tests__/components/ContinuousView.test.tsx

@@ -820,6 +820,29 @@ describe('ContinuousView scroll behavior', () => {
     expect(scrollIntoViewMock).toHaveBeenCalledWith(expect.objectContaining({ behavior: 'auto' }));
   });
 
+  it('snaps the link slots (no transition) during an external jump so they do not slide after the fade-in', () => {
+    const book = makeBook();
+    const props = requiredProps(book, { focusedTokenRef: 'tok-0' });
+    const { container, rerender } = render(<ContinuousView {...props} />, withAnalysisStore);
+
+    act(() => {
+      jest.useFakeTimers();
+    });
+    // External nav into the other verse: the active segment commits instantly behind the fade, so
+    // the slots must snap to their new widths rather than animating (which would slide the boxes for
+    // ~200ms after the strip fades back in).
+    rerender(<ContinuousView {...{ ...props, focusedTokenRef: 'tok-3' }} />);
+
+    const slotWrapper = container.querySelector('[data-link-slot] > span');
+    if (!(slotWrapper instanceof HTMLElement)) throw new Error('Expected a link-slot wrapper span');
+    expect(slotWrapper.style.transitionDuration).toBe('0ms');
+
+    act(() => {
+      jest.advanceTimersByTime(600);
+      jest.useRealTimers();
+    });
+  });
+
   it('smooth-scrolls for internal nav once the parent echoes the ref back synchronously', async () => {
     // The smooth-scroll path requires the displayed focus to already agree with the prop and the
     // strip to be visible when the scroll effect runs. That only happens when a real (stateful)

src/__tests__/hooks/useSegmentWindow.test.ts

@@ -66,17 +66,26 @@ function makeBook(chapter1Count: number, chapter2Count: number): Book {
  * @param scrRef - The scripture reference whose verse anchors the window.
  * @returns The render-hook result plus the scroll container element.
  */
-function renderSegmentWindow(book: Book, scrRef: SerializedVerseRef) {
+function renderSegmentWindow(book: Book, scrRef: SerializedVerseRef, focusedTokenRef?: string) {
   const container = document.createElement('div');
   document.body.appendChild(container);
   // Shared across renders so a test can stamp it (mimicking an internal nav) before a rerender.
   const internalNavRef: { current: string | undefined } = { current: undefined };
-  const hook = renderHook(
-    ({ b, ref }: { b: Book; ref: SerializedVerseRef }) => {
+  const hook = renderHook<
+    ReturnType<typeof useSegmentWindow>,
+    { b: Book; ref: SerializedVerseRef; focus?: string | undefined }
+  >(
+    ({ b, ref, focus }) => {
       const scrollContainerRef = useRef<HTMLElement | undefined>(container);
-      return useSegmentWindow({ book: b, scrRef: ref, scrollContainerRef, internalNavRef });
+      return useSegmentWindow({
+        book: b,
+        scrRef: ref,
+        focusedTokenRef: focus,
+        scrollContainerRef,
+        internalNavRef,
+      });
     },
-    { initialProps: { b: book, ref: scrRef } },
+    { initialProps: { b: book, ref: scrRef, focus: focusedTokenRef } },
   );
   return { ...hook, container, internalNavRef };
 }
@@ -585,4 +594,52 @@ describe('useSegmentWindow', () => {
     unmount();
     expect(global.ioInstances).toHaveLength(0);
   });
+
+  it('initializes displayFocusedTokenRef from the initial focused token', () => {
+    const book = makeBook(40, 0);
+    const { result } = renderSegmentWindow(
+      book,
+      { book: 'GEN', chapterNum: 1, verseNum: 15 },
+      'tok-initial',
+    );
+    expect(result.current.displayFocusedTokenRef).toBe('tok-initial');
+  });
+
+  it('defers displayFocusedTokenRef to the recenter midpoint on external nav', () => {
+    const book = makeBook(60, 0);
+    const { result, rerender } = renderSegmentWindow(
+      book,
+      { book: 'GEN', chapterNum: 1, verseNum: 5 },
+      'tok-old',
+    );
+
+    // External nav: the focused token jumps to the new verse the same render the anchor changes.
+    act(() =>
+      rerender({ b: book, ref: { book: 'GEN', chapterNum: 1, verseNum: 50 }, focus: 'tok-new' }),
+    );
+    // Mid-fade: the display ref must still read the old token so the active-verse buttons on the
+    // still-visible old content don't re-evaluate (and dim) before the fade-out completes.
+    expect(result.current.isFaded).toBe(true);
+    expect(result.current.displayFocusedTokenRef).toBe('tok-old');
+
+    // At the midpoint the window swaps behind the fade and the display ref catches up.
+    act(() => jest.advanceTimersByTime(RECENTER_FADE_MS));
+    expect(result.current.displayFocusedTokenRef).toBe('tok-new');
+  });
+
+  it('updates displayFocusedTokenRef immediately for a within-verse focus move (no fade)', () => {
+    const book = makeBook(40, 0);
+    const { result, rerender } = renderSegmentWindow(
+      book,
+      { book: 'GEN', chapterNum: 1, verseNum: 15 },
+      'tok-a',
+    );
+
+    // Same verse (anchor unchanged), focus moves token-to-token: no fade, display ref tracks at once.
+    act(() =>
+      rerender({ b: book, ref: { book: 'GEN', chapterNum: 1, verseNum: 15 }, focus: 'tok-b' }),
+    );
+    expect(result.current.isFaded).toBe(false);
+    expect(result.current.displayFocusedTokenRef).toBe('tok-b');
+  });
 });

src/components/ContinuousView.tsx

@@ -250,6 +250,17 @@ export default function ContinuousView({
 
   const [isVisible, setIsVisible] = useState(false);
 
+  /**
+   * True for the single render in which an instant jump (external nav or initial mount) flips
+   * {@link committedActiveSegmentId}, so the link slots snap to their new widths instead of
+   * animating. `isVisible` alone can't gate this: the scroll effect's cleanup restores visibility
+   * before the new effect commits the segment, so by the time the slots want their new widths
+   * `isVisible` is already `true` and the transition would play — sliding the boxes (and yanking
+   * the recentered phrase) for ~200ms after the fade-in. Cleared in the deferred fade-in frame, one
+   * paint after the snap, so genuine in-view toggles still animate.
+   */
+  const [skipSlotTransitionForJump, setSkipSlotTransitionForJump] = useState(false);
+
   /** True until the first scroll-into-view completes; suppresses smooth scroll on initial mount. */
   const isInitialLoadInProgressRef = useRef(true);
 
@@ -477,6 +488,7 @@ export default function ContinuousView({
     if (shouldJumpInstantly) {
       // External jumps fade the strip out and the initial mount is static, so there is no animation
       // to disturb — commit the active segment now alongside the instant scroll.
+      setSkipSlotTransitionForJump(true);
       commitPendingActiveSegment();
       phraseRefs.current[focusPhraseIndex]?.scrollIntoView({
         behavior: 'auto',
@@ -530,7 +542,11 @@ export default function ContinuousView({
     if (isInitialLoad) isInitialLoadInProgressRef.current = false;
 
     // Defer the fade-in until after the browser applies the instant scroll position.
-    const rafId = requestAnimationFrame(() => setIsVisible(true));
+    const rafId = requestAnimationFrame(() => {
+      setIsVisible(true);
+      // The snapped-slot paint has happened; re-enable the transition for later in-view toggles.
+      setSkipSlotTransitionForJump(false);
+    });
     return () => {
       cancelAnimationFrame(rafId);
       setIsVisible(true);
@@ -662,7 +678,7 @@ export default function ContinuousView({
       activeSegmentId: committedActiveSegmentId,
       crossSegmentLinkTooltip:
         localizedStrings['%interlinearizer_linkButton_crossSegmentDisabledTooltip%'],
-      skipLinkTransition: !isVisible,
+      skipLinkTransition: !isVisible || skipSlotTransitionForJump,
     }),
     [
       phraseMode,
@@ -678,6 +694,7 @@ export default function ContinuousView({
       simplifyPhrases,
       committedActiveSegmentId,
       isVisible,
+      skipSlotTransitionForJump,
       localizedStrings,
     ],
   );
@@ -694,18 +711,22 @@ export default function ContinuousView({
 
   /**
    * Resolved focus context — what's focused, what segment it's in, what phrase it belongs to. Built
-   * once from `focusedTokenRef` and reused by all highlight + slot decisions so the rules match
-   * SegmentView exactly.
+   * from the fade-gated `displayFocusedTokenRef` (not the live `focusedTokenRef`) so every
+   * highlight and link-button active/disabled decision moves only at the recenter midpoint, behind
+   * the fade — never re-evaluating (and dimming the buttons) on the still-visible old strip the
+   * instant an external nav reseeds the live focus. The scroll target (`focusedGroupIndex`) still
+   * uses the live ref so the jump lands on the new verse behind the curtain. Mirrors SegmentView,
+   * which is fed the segment window's own gated display ref.
    */
   const focus = useMemo(
     () =>
       resolveFocusContext(
-        focusedTokenRef,
+        displayFocusedTokenRef,
         wordTokenByRef,
         committedPhraseLinkByRef,
         tokenSegmentMap,
       ),
-    [focusedTokenRef, wordTokenByRef, committedPhraseLinkByRef, tokenSegmentMap],
+    [displayFocusedTokenRef, wordTokenByRef, committedPhraseLinkByRef, tokenSegmentMap],
   );
 
   /** True when any committed phrase exists in the visible window. */

src/components/Interlinearizer.tsx

@@ -189,12 +189,14 @@ function InterlinearizerInner({
     windowSegments,
     isFaded,
     displayScrRef,
+    displayFocusedTokenRef,
     topSentinelRef,
     bottomSentinelRef,
     recenterOnActive,
   } = useSegmentWindow({
     book,
     scrRef,
+    focusedTokenRef,
     scrollContainerRef,
     internalNavRef,
   });
@@ -372,7 +374,7 @@ function InterlinearizerInner({
                   key={seg.id}
                   displayMode={continuousScroll ? 'baseline-text' : 'token-chip'}
                   editPhraseSegmentId={editPhraseSegmentId}
-                  focusedTokenRef={continuousScroll ? undefined : focusedTokenRef}
+                  focusedTokenRef={continuousScroll ? undefined : displayFocusedTokenRef}
                   hoveredPhraseId={hoveredPhraseId}
                   isActive={
                     seg.startRef.book === displayScrRef.book &&

src/hooks/useSegmentWindow.ts

@@ -68,6 +68,13 @@ export interface UseSegmentWindowArgs {
   book: Book;
   /** Current scripture reference; the active verse it names is the recenter anchor. */
   scrRef: SerializedVerseRef;
+  /**
+   * Token ref of the currently focused word token, or `undefined` when nothing is focused. Gated
+   * alongside {@link UseSegmentWindowResult.displayScrRef} so the per-token focus highlight and the
+   * link-button active state only move behind the recenter fade on external nav — never on the old,
+   * still-visible content before the fade-out starts.
+   */
+  focusedTokenRef: string | undefined;
   /** Ref to the scrollable list container; used to read/adjust scroll position and host sentinels. */
   scrollContainerRef: RefObject<HTMLElement | undefined>;
   /**
@@ -96,6 +103,13 @@ export interface UseSegmentWindowResult {
    * lockstep.
    */
   displayScrRef: SerializedVerseRef;
+  /**
+   * Token ref the list should highlight as focused. Gated on the same clock as {@link displayScrRef}
+   * so the per-token focus and link-button active state move only at the recenter midpoint, behind
+   * the fade — never on the old content before the fade-out begins. Tracks `focusedTokenRef`
+   * immediately for internal nav and the initial mount.
+   */
+  displayFocusedTokenRef: string | undefined;
   /** Ref callback for the invisible sentinel placed above the first segment. */
   topSentinelRef: (el: HTMLElement | null) => void;
   /** Ref callback for the invisible sentinel placed below the last segment. */
@@ -173,6 +187,7 @@ function buildCenteredRange(anchorIndex: number, total: number): WindowRange {
 export default function useSegmentWindow({
   book,
   scrRef,
+  focusedTokenRef,
   scrollContainerRef,
   internalNavRef,
 }: UseSegmentWindowArgs): UseSegmentWindowResult {
@@ -192,6 +207,16 @@ export default function useSegmentWindow({
    */
   const [displayScrRef, setDisplayScrRef] = useState<SerializedVerseRef>(scrRef);
 
+  /**
+   * Focused token ref the per-token highlight and link-button active state track. Gated on the same
+   * clock as {@link displayScrRef}: deferred to the recenter midpoint on external nav (so buttons
+   * never re-evaluate active/disabled — and dim — on the old, still-visible content before the
+   * fade-out), updated immediately for internal nav and the initial value.
+   */
+  const [displayFocusedTokenRef, setDisplayFocusedTokenRef] = useState<string | undefined>(
+    focusedTokenRef,
+  );
+
   /**
    * Scroll-height correction owed to the next paint. When segments are prepended the content above
    * the viewport grows; recording the pre-mutation `scrollHeight` lets the layout effect restore
@@ -234,6 +259,8 @@ export default function useSegmentWindow({
   totalRef.current = total;
   const scrRefRef = useRef(scrRef);
   scrRefRef.current = scrRef;
+  const focusedTokenRefRef = useRef(focusedTokenRef);
+  focusedTokenRefRef.current = focusedTokenRef;
 
   /**
    * Handle of the in-flight recenter fade timeout, or `undefined` when no recenter is mid-flight.
@@ -355,6 +382,7 @@ export default function useSegmentWindow({
       setRange(buildCenteredRange(anchorIndexRef.current, totalRef.current));
       setRecenterEpoch((n) => n + 1);
       setDisplayScrRef(scrRefRef.current);
+      setDisplayFocusedTokenRef(focusedTokenRefRef.current);
       setIsFaded(false);
     }, RECENTER_FADE_MS);
   }, []);
@@ -383,6 +411,7 @@ export default function useSegmentWindow({
     internalNavRef.current = undefined;
     if (isInternal) {
       setDisplayScrRef(currentScrRef);
+      setDisplayFocusedTokenRef(focusedTokenRefRef.current);
       return;
     }
     triggerRecenter();
@@ -393,6 +422,19 @@ export default function useSegmentWindow({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [anchorIndex, segments, internalNavRef, triggerRecenter]);
 
+  // Track within-verse focus moves (arrow/click that stays in the active verse) immediately. These
+  // change `focusedTokenRef` without changing `anchorIndex`, so the recenter effect above never
+  // fires for them; sync the display ref here so the focus highlight follows. Skip while a recenter
+  // fade is in flight — that swap owns the display ref and lands the new focus at the midpoint, so
+  // updating here too would move the highlight (and re-dim buttons) on the old content before the
+  // fade-out completes. `recenterTimeoutRef` is set synchronously by `triggerRecenter`, so it reads
+  // true even in the same commit the external nav starts the fade — when `isFaded` state is still
+  // stale.
+  useEffect(() => {
+    if (recenterTimeoutRef.current !== undefined) return;
+    setDisplayFocusedTokenRef(focusedTokenRef);
+  }, [focusedTokenRef]);
+
   // The mounted sentinel elements, held in state so the observer effect re-runs once they attach.
   // Ref callbacks only record the node; the actual observe happens in the effect below, which runs
   // after React has attached every ref — including the scroll container (an ancestor). Wiring the
@@ -472,6 +514,7 @@ export default function useSegmentWindow({
     windowSegments,
     isFaded,
     displayScrRef,
+    displayFocusedTokenRef,
     topSentinelRef,
     bottomSentinelRef,
     recenterOnActive,