Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-06 22:17:01 +02:00
Code Issues Packages Projects Releases Activity

feat(mobile/nav): reduce flickering when navigating

Browse Source
This commit is contained in:
Elian Doran
2026-04-21 00:05:49 +03:00
parent 5d6f4cb50a
commit 2e6a643ead
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.css
View File

@@ -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;

6
apps/client/src/widgets/mobile_widgets/MobileNoteNavigator.tsx
View File

@@ -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", {