Refactor: optimize notes covers rendering

src/application/services/useNoteList.ts

@@ -69,17 +69,62 @@ export default function (onlyCreatedByUser = false): UseNoteListComposableState
   const isLoading = ref(false);
 
   /**
-   * Get note list
+   * Get note list (metadata only, covers are not downloaded)
    * @param page - number of pages
    */
   const load = async (page: number): Promise<NoteList> => {
     isLoading.value = true;
+    try {
+      return await noteListService.getNoteList(page, onlyCreatedByUser);
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  /**
+   * Load cover images for all notes in the list in the background
+   * Updates each note's cover reactively as it arrives
+   */
+  const loadCovers = async (): Promise<void> => {
+    if (isEmpty(noteList.value)) {
+      return;
+    }
 
-    const list = await noteListService.getNoteList(page, onlyCreatedByUser);
+    const list = noteList.value;
+    const items = list.items;
 
-    isLoading.value = false;
+    await Promise.all(items.map(async (item, index) => {
+      /**
+       * If cover is null, the note has no cover image
+       */
+      if (item.cover === null) {
+        return;
+      }
+
+      /**
+       * If cover is already a blob URL, it was already loaded
+       */
+      if (item.cover.startsWith('blob:')) {
+        return;
+      }
 
-    return list;
+      const url = await noteListService.loadCover(item.id, item.cover);
+
+      if (url !== null) {
+        const currentItem = list.items[index];
+
+        if (currentItem?.id !== item.id) {
+          return;
+        }
+        /**
+         * Update the specific note's cover reactively so the card renders the image
+         */
+        list.items[index] = {
+          ...currentItem,
+          cover: url,
+        };
+      }
+    }));
   };
 
   /**
@@ -102,6 +147,12 @@ export default function (onlyCreatedByUser = false): UseNoteListComposableState
     } else {
       noteList.value = loadedNotes;
     }
+
+    /**
+     * Kick off cover downloads in the background
+     * List is already rendered, covers will appear one by one as they load
+     */
+    loadCovers().catch(console.error);
   };
 
   /**

src/domain/noteList.service.ts

@@ -20,54 +20,31 @@ export default class NoteListService {
   }
 
   /**
-   * Returns note list
-   * @todo - move loading images data logic to separate service for optimization
+   * Returns note list with metadata only (covers are not downloaded)
    * @param page - number of current pages
    * @param onlyCreatedByUser - if true, returns notes created by the user
    * @returns list of notes
    */
   public async getNoteList(page: number, onlyCreatedByUser = false): Promise<NoteList> {
-    const noteList = await this.repository.getNoteList(page, onlyCreatedByUser);
-
-    /**
-     * Note list with valid image urls in cover
-     */
-    const parsedNoteList: NoteList = {
-      items: [],
-    };
-
-    for (const note of noteList.items) {
-      /**
-       * If note has no cover, we have no need to load it
-       */
-      if (note.cover === null) {
-        parsedNoteList.items.push(note);
-        continue;
-      }
-
-      /**
-       * Cover object url for passing to the element
-       */
-      let objUrl: string | null = null;
+    return await this.repository.getNoteList(page, onlyCreatedByUser);
+  }
 
-      try {
-        const imageData = await this.noteAttachmentRepository.load(note.id, note.cover);
+  /**
+   * Load cover image for a single note and return its blob URL
+   * @param noteId - Note identifier
+   * @param coverKey - Cover file key on server
+   * @returns Blob URL for the cover image, or null on error
+   */
+  public async loadCover(noteId: string, coverKey: string): Promise<string | null> {
+    try {
+      const imageData = await this.noteAttachmentRepository.load(noteId, coverKey);
 
-        /**
-         * Make url from blob data
-         */
-        // eslint-disable-next-line n/no-unsupported-features/node-builtins
-        objUrl = URL.createObjectURL(imageData);
-      } catch {
-        console.log('Error while loading cover for note ', note.id);
-      }
+      // eslint-disable-next-line n/no-unsupported-features/node-builtins
+      return URL.createObjectURL(imageData);
+    } catch {
+      console.log('Error while loading cover for note ', noteId);
 
-      parsedNoteList.items.push({
-        ...note,
-        cover: objUrl,
-      });
+      return null;
     }
-
-    return parsedNoteList;
   }
 }

src/presentation/components/note-list/NoteList.vue

@@ -15,7 +15,7 @@
         <Card
           :title="getTitle(note.content)"
           :subtitle="getSubtitle(note)"
-          :src="note.cover || undefined"
+          :src="note.cover?.startsWith('blob:') ? note.cover : undefined"
           orientation="vertical"
         />
       </RouterLink>