refactor(viewer): sidebar debouncing

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/viewer/Viewer.vue

@@ -1059,11 +1059,15 @@ export default defineComponent({
      * to the sidebar while the user is scrolling through photos.
      */
     async openSidebar() {
-      const photo = this.currentPhoto!;
-
-      // Update the sidebar
-      const update = async () => {
+      const photo = this.currentPhoto;
+      if (!photo) return;
       const abort = () => !this.isOpen || photo !== this.currentPhoto;
+
+      // Update the sidebar, first call immediate
+      utils.setRenewingTimeout(
+        this,
+        '_sidebarUpdateTimer',
+        async () => {
           if (abort()) return;
 
           _m.sidebar.setTab('memories-metadata');
@@ -1071,7 +1075,7 @@ export default defineComponent({
             _m.sidebar.open(photo);
           } else {
             const fileInfo = (await dav.getFiles([photo]))[0];
-          if (abort()) return;
+            if (!fileInfo || abort()) return;
 
             // get attributes
             const filename = fileInfo?.filename;
@@ -1080,17 +1084,10 @@ export default defineComponent({
             // open sidebar
             _m.sidebar.open(photo, filename, useNative);
           }
-      };
-
-      // Do not debounce the first call
-      let callback = update;
-      if (!this.sidebarUpdateTimer) {
-        callback();
-        callback = async () => {};
-      }
-
-      // Debounce the rest
-      utils.setRenewingTimeout(this, 'sidebarUpdateTimer', callback, SIDEBAR_DEBOUNCE_MS);
+        },
+        SIDEBAR_DEBOUNCE_MS,
+        true,
+      );
     },
 
     handleAppSidebarOpen() {

src/services/utils/algo.ts

@@ -80,8 +80,29 @@ export function randomSubarray<T>(arr: T[], size: number): T[] {
   return shuffled.slice(min);
 }
 
-/** Set a timer that renews if existing */
-export function setRenewingTimeout(ctx: any, name: string, callback: (() => void) | null, delay: number): void {
+/**
+ * Set a timer that renews if existing .
+ *
+ * @param ctx Context to store the timeout in
+ * @param name Name of the timeout
+ * @param callback Callback to call when the timeout expires
+ * @param delay Delay in milliseconds
+ * @param immediate If true, call the callback immediately if no timeout exists
+ */
+export function setRenewingTimeout(
+  ctx: any,
+  name: string,
+  callback: (() => void) | null,
+  delay: number,
+  immediate?: boolean,
+): void {
+  // Call immediately if no timeout exists
+  if (immediate && !ctx[name]) {
+    callback?.();
+    callback = null;
+  }
+
+  // Clear existing timeout and set a new one
   if (ctx[name]) window.clearTimeout(ctx[name]);
   ctx[name] = window.setTimeout(() => {
     ctx[name] = 0;