From 33aece6f96a6b58fe08bdea05bd5de9339e39e1a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 22 Nov 2025 12:16:48 +0200
Subject: [PATCH] fix(collections): flicker when adding new entries

---
 .../src/widgets/collections/NoteList.tsx      | 59 ++++++++++---------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/apps/client/src/widgets/collections/NoteList.tsx b/apps/client/src/widgets/collections/NoteList.tsx
index 1f6427978..1081cd6df 100644
--- a/apps/client/src/widgets/collections/NoteList.tsx
+++ b/apps/client/src/widgets/collections/NoteList.tsx
@@ -8,6 +8,7 @@ import { subscribeToMessages, unsubscribeToMessage as unsubscribeFromMessage } f
 import { WebSocketMessage } from "@triliumnext/commons";
 import froca from "../../services/froca";
 import { lazy, Suspense } from "preact/compat";
+import { VNode } from "preact";
 interface NoteListProps {
     note: FNote | null | undefined;
     notePath: string | null | undefined;
@@ -22,6 +23,33 @@ interface NoteListProps {
     onProgressChanged?(progress: number): void;
 }
 
+type LazyLoadedComponent = ((props: ViewModeProps<any>) => VNode<any> | undefined);
+const ViewComponents: Record<ViewTypeOptions, { normal: LazyLoadedComponent, print?: LazyLoadedComponent }> = {
+    list: {
+        normal: lazy(() => import("./legacy/ListOrGridView.js").then(i => i.ListView)),
+        print: lazy(() => import("./legacy/ListPrintView.js").then(i => i.ListPrintView))
+    },
+    grid: {
+        normal: lazy(() => import("./legacy/ListOrGridView.js").then(i => i.GridView)),
+    },
+    geoMap: {
+        normal: lazy(() => import("./geomap/index.js")),
+    },
+    calendar: {
+        normal: lazy(() => import("./calendar/index.js"))
+    },
+    table: {
+        normal: lazy(() => import("./table/index.js")),
+        print: lazy(() => import("./table/TablePrintView.js"))
+    },
+    board: {
+        normal: lazy(() => import("./board/index.js"))
+    },
+    presentation: {
+        normal: lazy(() => import("./presentation/index.js"))
+    }
+}
+
 export default function NoteList(props: Pick<NoteListProps, "displayOnlyCollections" | "media" | "onReady" | "onProgressChanged">) {
     const { note, noteContext, notePath, ntxId } = useNoteContext();
     const viewType = useNoteViewType(note);
@@ -86,7 +114,9 @@ export function CustomNoteList({ note, viewType, isEnabled: shouldEnable, notePa
         }
     }
 
-    const ComponentToRender = viewType && props && isEnabled && getComponentByViewType(viewType, props);
+    const ComponentToRender = viewType && props && isEnabled && (
+        props.media === "print" ? ViewComponents[viewType].print : ViewComponents[viewType].normal
+    );
 
     return (
         <div ref={widgetRef} className={`note-list-widget component ${isFullHeight && isEnabled ? "full-height" : ""}`}>
@@ -101,33 +131,6 @@ export function CustomNoteList({ note, viewType, isEnabled: shouldEnable, notePa
     );
 }
 
-function getComponentByViewType(viewType: ViewTypeOptions, props: ViewModeProps<any>) {
-    switch (viewType) {
-        case "list":
-            if (props.media !== "print") {
-                return lazy(() => import("./legacy/ListOrGridView.js").then(i => i.ListView));
-            } else {
-                return lazy(() => import("./legacy/ListPrintView.js").then(i => i.ListPrintView));
-            }
-        case "grid":
-            return lazy(() => import("./legacy/ListOrGridView.js").then(i => i.GridView));
-        case "geoMap":
-            return lazy(() => import("./geomap/index.js"));
-        case "calendar":
-            return lazy(() => import("./calendar/index.js"));
-        case "table":
-            if (props.media !== "print") {
-                return lazy(() => import("./table/index.js"));
-            } else {
-                return lazy(() => import("./table/TablePrintView.js"));
-            }
-        case "board":
-            return lazy(() => import("./board/index.js"));
-        case "presentation":
-            return lazy(() => import("./presentation/index.js"));
-    }
-}
-
 export function useNoteViewType(note?: FNote | null): ViewTypeOptions | undefined {
     const [ viewType ] = useNoteLabel(note, "viewType");