Merge pull request #41 from jillro/maud/search_performances

Search performances

src/components/Card.svelte

@@ -7,20 +7,22 @@
     TFile,
   } from "obsidian";
   import { onMount } from "svelte";
-  import { skipNextTransition, app, view, settings } from "./store";
+  import { fade } from "svelte/transition";
+  import { app, view, settings } from "./store";
   import { TitleDisplayMode } from "../settings";
   import { assert, is } from "tsafe";
 
   interface Props {
     file: TFile;
-    updateLayoutNextTick: (transition: boolean) => void;
+    updateLayoutNextTick: () => Promise<void>;
   }
 
   let { file, updateLayoutNextTick }: Props = $props();
   let contentDiv: HTMLElement;
   let pinned: boolean = $derived($settings.pinnedFiles.includes(file.path));
   // This will depend both on the settings and the content of the file
   let displayFilename: boolean = $state(true);
+  let translateTransition: boolean = $state(false);
 
   function postProcessor(
     element: HTMLElement,
@@ -110,16 +112,17 @@
 
   const togglePin = async (e: Event) => {
     e.stopPropagation();
+    e.preventDefault();
     $settings.pinnedFiles = pinned
       ? $settings.pinnedFiles.filter((f) => f !== file.path)
       : [...$settings.pinnedFiles, file.path];
-    updateLayoutNextTick(true);
+    await updateLayoutNextTick();
   };
 
   const trashFile = async (e: Event) => {
     e.stopPropagation();
     await file.vault.trash(file, true);
-    updateLayoutNextTick(true);
+    await updateLayoutNextTick();
   };
 
   const openFile = async () =>
@@ -132,15 +135,17 @@
   onMount(() => {
     (async () => {
       await renderFile(contentDiv);
-      updateLayoutNextTick(false);
+      await updateLayoutNextTick();
+      translateTransition = true;
     })();
-    return () => updateLayoutNextTick(false);
+    return () => updateLayoutNextTick();
   });
 </script>
 
 <div
   class="card"
-  class:skip-transition={$skipNextTransition}
+  class:transition={translateTransition}
+  transition:fade
   onclick={openFile}
   role="link"
   onkeydown={openFile}
@@ -179,13 +184,11 @@
     word-wrap: break-word;
     overflow-y: hidden;
     margin: 0;
-    transition-property: transform;
-    transition-duration: 0.4s;
-    transform: translate(0, 100vh);
   }
 
-  .card.skip-transition {
-    transition: none;
+  .card.transition {
+    transition-property: transform;
+    transition-duration: 0.4s;
   }
 
   .card {

src/components/Root.svelte

@@ -8,10 +8,9 @@
     displayedFiles,
     searchQuery,
     searchCaseSensitive,
-    skipNextTransition,
+    searchResultLoadingState,
     Sort,
     sort,
-    viewIsVisible,
     settings,
   } from "./store";
 
@@ -63,47 +62,49 @@
       gutter: 20,
       surroundingGutter: false,
       ultimateGutter: 20,
+      wedge: true,
     });
-    $skipNextTransition = true;
     notesGrid.layout();
 
     return () => {
       notesGrid.destroy();
     };
   });
 
-  let layoutTimeout: NodeJS.Timeout | null = null;
+  let lastLayout: Date = new Date();
+  let pendingLayout: NodeJS.Timeout | null = null;
   const debouncedLayout = () => {
     // If there has been a relayout call in the last 100ms,
-    // we schedule another one in 100ms to avoid layout thrashing
-    // If one is already schedule, we cancel it and schedule a new one
-    if (layoutTimeout) {
-      clearTimeout(layoutTimeout);
-      layoutTimeout = setTimeout(() => {
-        notesGrid.layout();
-        if (layoutTimeout) clearTimeout(layoutTimeout);
-      }, 100);
-      return;
-    }
+    // we schedule another one 100ms later to avoid layout thrashing
+    return new Promise<void>((resolve) => {
+      if (
+        lastLayout.getTime() + 100 > new Date().getTime() &&
+        pendingLayout === null
+      ) {
+        pendingLayout = setTimeout(
+          () => {
+            notesGrid.layout();
+            lastLayout = new Date();
+            pendingLayout = null;
+            resolve();
+          },
+          lastLayout.getTime() + 100 - new Date().getTime(),
+        );
+        return;
+      }
 
-    // Otherwise, relayout immediately
-    notesGrid.layout();
-    layoutTimeout = setTimeout(() => {
-      if (layoutTimeout) clearTimeout(layoutTimeout);
-    }, 100);
+      // Otherwise, relayout immediately
+      notesGrid.layout();
+      lastLayout = new Date();
+      resolve();
+    });
   };
 
-  const updateLayoutNextTick = (transition = false) => {
-    if (!$viewIsVisible) {
-      $skipNextTransition = true;
-      return;
-    } else {
-      $skipNextTransition = !transition;
-    }
-
-    tick().then(debouncedLayout);
-    $skipNextTransition = false;
+  const updateLayoutNextTick = async () => {
+    await tick();
+    return await debouncedLayout();
   };
+  displayedFiles.subscribe(updateLayoutNextTick);
 </script>
 
 <div class="action-bar">
@@ -121,6 +122,10 @@
         spellcheck="false"
         bind:value={$searchQuery}
       />
+      <div
+        class="loading-bar"
+        style:--loading={`${(1 - $searchResultLoadingState) * 100}%`}
+      ></div>
       <div
         class="search-input-clear-button"
         onclick={() => ($searchQuery = "")}
@@ -259,6 +264,27 @@
       box-shadow: calc(0px - var(--size-4-5)) 0 var(--size-2-3) var(--size-2-3)
         var(--background-primary);
     }
+
+    .search-input-container {
+      background-color: var(--background-primary);
+      z-index: 0;
+
+      & .loading-bar {
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: var(--loading);
+        background-color: var(--background-secondary);
+      }
+
+      & input {
+        background: transparent;
+        position: relative;
+        z-index: 2;
+      }
+    }
   }
 
   .cards-container {