From 2e6a643ead85115f94efc6a4ff9cbdf6e6970b6c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 21 Apr 2026 00:05:49 +0300
Subject: [PATCH] feat(mobile/nav): reduce flickering when navigating

---
 .../src/widgets/mobile_widgets/MobileNoteNavigator.css   | 9 ++++++++-
 .../src/widgets/mobile_widgets/MobileNoteNavigator.tsx   | 6 +++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.css b/apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.css
index be36b21a30..1f27b06f51 100644
--- a/apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.css
+++ b/apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.css
@@ -106,7 +106,7 @@
 
 .mobile-navigator-current-preview {
     position: relative;
-    max-height: 140px;
+    height: 140px;
     overflow: hidden;
     font-size: 0.92em;
     line-height: 1.35;
@@ -114,6 +114,13 @@
     pointer-events: none;
 }
 
+/* Hide stale content during the brief window between commit and the new content
+   being rendered into the DOM, so the preview doesn't flash the previous note's
+   content before the new one arrives. */
+.mobile-navigator-current-preview .note-book-content:not(.note-book-content-ready) {
+    visibility: hidden;
+}
+
 .mobile-navigator-current-preview::after {
     content: "";
     position: absolute;
diff --git a/apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.tsx b/apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.tsx
index 262019df83..24a55939a2 100644
--- a/apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.tsx
+++ b/apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.tsx
@@ -113,12 +113,16 @@ export default function MobileNoteNavigator() {
         if (pendingNote) setNextReadyNoteId(pendingNote.noteId);
     }, [pendingNote]);
 
+    const scrollRef = useRef<HTMLDivElement>(null);
+
     useEffect(() => {
         if (!nextStack || !pendingId || nextReadyNoteId !== pendingId) return;
         setStack(nextStack);
         setReadyForNoteId(pendingId);
         setNextStack(null);
         setNextReadyNoteId(null);
+        // Reset scroll so the committed tile is visible at the top of the column.
+        if (scrollRef.current) scrollRef.current.scrollTop = 0;
     }, [nextStack, pendingId, nextReadyNoteId]);
 
     const navigateTo = useCallback(
@@ -174,7 +178,7 @@ export default function MobileNoteNavigator() {
                 />
             </div>
 
-            <div className={clsx("mobile-navigator-scroll", showInitialLoader && "is-pending")}>
+            <div ref={scrollRef} className={clsx("mobile-navigator-scroll", showInitialLoader && "is-pending")}>
                 {parentNote && (
                     <div
                         className={clsx("mobile-navigator-current-tile", {