From 374645e136e5c1bfee98d44af9ef48c33ec2f861 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 28 Oct 2025 15:56:03 -0400
Subject: [PATCH 1/2] Improve scan page performance on large lists

---
 frontend/src/components/Scan/ScanPlatform.vue |  9 ++
 .../src/components/common/Game/RAvatar.vue    |  5 +-
 .../components/common/Navigation/ScanBtn.vue  | 95 +++++++++++--------
 frontend/src/composables/useAutoScroll.ts     | 28 ++++--
 4 files changed, 89 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/Scan/ScanPlatform.vue b/frontend/src/components/Scan/ScanPlatform.vue
index 87b444c1d..dd742012d 100644
--- a/frontend/src/components/Scan/ScanPlatform.vue
+++ b/frontend/src/components/Scan/ScanPlatform.vue
@@ -169,3 +169,12 @@ const { t } = useI18n();
     </v-list-item>
   </v-expansion-panel-text>
 </template>
+<style scoped>
+.v-chip {
+  contain: layout style paint;
+}
+
+.v-avatar {
+  contain: layout style paint;
+}
+</style>
diff --git a/frontend/src/components/common/Game/RAvatar.vue b/frontend/src/components/common/Game/RAvatar.vue
index 59c06c0d0..36f742d20 100644
--- a/frontend/src/components/common/Game/RAvatar.vue
+++ b/frontend/src/components/common/Game/RAvatar.vue
@@ -16,7 +16,10 @@ const fallbackCoverImage = computed(() =>
 
 <template>
   <v-avatar :width="size" rounded="0">
-    <v-img :src="props.rom.path_cover_small || fallbackCoverImage">
+    <v-img
+      :src="props.rom.path_cover_small || fallbackCoverImage"
+      :alt="props.rom.name || props.rom.fs_name"
+    >
       <template #error>
         <v-img :src="fallbackCoverImage" />
       </template>
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index 1512724f9..f38a6cc7f 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { debounce } from "lodash";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { inject, onBeforeUnmount } from "vue";
+import { inject, onBeforeUnmount, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { ScanStats } from "@/__generated__";
 import socket from "@/services/socket";
@@ -35,6 +36,56 @@ const romsStore = storeRoms();
 // Connect to socket on load to catch running scans
 if (!socket.connected) socket.connect();
 
+// Batch ROM updates to prevent excessive re-renders
+const romUpdateQueue = ref<SimpleRom[]>([]);
+const processRomUpdates = debounce(() => {
+  if (romUpdateQueue.value.length === 0) return;
+
+  const updates = [...romUpdateQueue.value];
+  romUpdateQueue.value = [];
+  updates.forEach((rom) => {
+    // Remove the ROM from the recent list and add it back to the top
+    romsStore.removeFromRecent(rom);
+    romsStore.addToRecent(rom);
+
+    if (romsStore.currentPlatform?.id === rom.platform_id) {
+      const existingRom = romsStore.filteredRoms.find((r) => r.id === rom.id);
+      if (existingRom) {
+        romsStore.update(rom);
+      } else {
+        romsStore.add([rom]);
+      }
+    }
+
+    let scannedPlatform = scanningPlatforms.value.find(
+      (p) => p.slug === rom.platform_slug,
+    );
+
+    // Add the platform if the socket dropped and it's missing
+    if (!scannedPlatform) {
+      scanningPlatforms.value.push({
+        display_name: rom.platform_display_name,
+        slug: rom.platform_slug,
+        id: rom.platform_id,
+        fs_slug: rom.platform_fs_slug,
+        is_identified: true,
+        roms: [],
+      });
+      scannedPlatform = scanningPlatforms.value[0];
+    }
+
+    // Check if ROM already exists in the store
+    const existingRom = scannedPlatform?.roms.find((r) => r.id === rom.id);
+    if (existingRom) {
+      scannedPlatform.roms = scannedPlatform.roms.map((r) =>
+        r.id === rom.id ? rom : r,
+      );
+    } else {
+      scannedPlatform?.roms.push(rom);
+    }
+  });
+}, 100);
+
 socket.on(
   "scan:scanning_platform",
   ({
@@ -68,45 +119,9 @@ socket.on(
 socket.on("scan:scanning_rom", (rom: SimpleRom) => {
   scanningStore.setScanning(true);
 
-  // Remove the ROM from the recent list and add it back to the top
-  romsStore.removeFromRecent(rom);
-  romsStore.addToRecent(rom);
-
-  if (romsStore.currentPlatform?.id === rom.platform_id) {
-    const existingRom = romsStore.filteredRoms.find((r) => r.id === rom.id);
-    if (existingRom) {
-      romsStore.update(rom);
-    } else {
-      romsStore.add([rom]);
-    }
-  }
-
-  let scannedPlatform = scanningPlatforms.value.find(
-    (p) => p.slug === rom.platform_slug,
-  );
-
-  // Add the platform if the socket dropped and it's missing
-  if (!scannedPlatform) {
-    scanningPlatforms.value.push({
-      display_name: rom.platform_display_name,
-      slug: rom.platform_slug,
-      id: rom.platform_id,
-      fs_slug: rom.platform_fs_slug,
-      is_identified: true,
-      roms: [],
-    });
-    scannedPlatform = scanningPlatforms.value[0];
-  }
-
-  // Check if ROM already exists in the store
-  const existingRom = scannedPlatform?.roms.find((r) => r.id === rom.id);
-  if (existingRom) {
-    scannedPlatform.roms = scannedPlatform.roms.map((r) =>
-      r.id === rom.id ? rom : r,
-    );
-  } else {
-    scannedPlatform?.roms.push(rom);
-  }
+  // Queue ROM for batch processing instead of immediate update
+  romUpdateQueue.value.push(rom);
+  processRomUpdates();
 });
 
 socket.on("scan:done", () => {
diff --git a/frontend/src/composables/useAutoScroll.ts b/frontend/src/composables/useAutoScroll.ts
index 922e02797..35515f543 100644
--- a/frontend/src/composables/useAutoScroll.ts
+++ b/frontend/src/composables/useAutoScroll.ts
@@ -1,3 +1,4 @@
+import { throttle } from "lodash";
 import { onUnmounted, watchEffect, nextTick, type ShallowRef } from "vue";
 
 export const useAutoScroll = (
@@ -9,7 +10,7 @@ export const useAutoScroll = (
   let isUserScrolled = false;
   let observer: MutationObserver | null = null;
 
-  const scrollToBottom = () => {
+  const scrollToBottom = throttle(() => {
     const containerEl = scrollContainer.value?.$el;
     if (!containerEl) return;
 
@@ -17,7 +18,7 @@ export const useAutoScroll = (
       top: containerEl.scrollHeight,
       behavior: config.smooth ? "smooth" : "instant",
     });
-  };
+  }, 50);
 
   const init = () => {
     const containerEl = scrollContainer.value?.$el;
@@ -31,14 +32,27 @@ export const useAutoScroll = (
         containerEl.scrollHeight;
     });
 
-    // Auto-scroll on content changes
-    observer = new MutationObserver((e: MutationRecord[]) => {
+    // Auto-scroll on content changes with throttled observer
+    observer = new MutationObserver((mutations: MutationRecord[]) => {
       if (!config.always && isUserScrolled) return;
-      if (e[e.length - 1].addedNodes.length === 0) return;
-      scrollToBottom();
+
+      // Only process if there are actual node additions
+      const hasNewNodes = mutations.some(
+        (mutation) =>
+          mutation.type === "childList" && mutation.addedNodes.length > 0,
+      );
+
+      if (hasNewNodes) {
+        scrollToBottom();
+      }
     });
 
-    observer.observe(observedEl, { childList: true, subtree: config.deep });
+    observer.observe(observedEl, {
+      childList: true,
+      subtree: config.deep,
+      attributes: false,
+      characterData: false,
+    });
     scrollToBottom();
   };
 

From 3e9a3df75b5fa5b1b6352d6a038065ce7a58744a Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 28 Oct 2025 16:14:06 -0400
Subject: [PATCH 2/2] changes from bot review

---
 .../src/components/common/Navigation/ScanBtn.vue  | 15 +++++++--------
 frontend/src/composables/useAutoScroll.ts         |  1 +
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index f38a6cc7f..09e26772e 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -50,11 +50,7 @@ const processRomUpdates = debounce(() => {
 
     if (romsStore.currentPlatform?.id === rom.platform_id) {
       const existingRom = romsStore.filteredRoms.find((r) => r.id === rom.id);
-      if (existingRom) {
-        romsStore.update(rom);
-      } else {
-        romsStore.add([rom]);
-      }
+      existingRom ? romsStore.update(rom) : romsStore.add([rom]);
     }
 
     let scannedPlatform = scanningPlatforms.value.find(
@@ -71,12 +67,14 @@ const processRomUpdates = debounce(() => {
         is_identified: true,
         roms: [],
       });
-      scannedPlatform = scanningPlatforms.value[0];
+      scannedPlatform = scanningPlatforms.value.at(-1)!;
     }
 
     // Check if ROM already exists in the store
-    const existingRom = scannedPlatform?.roms.find((r) => r.id === rom.id);
-    if (existingRom) {
+    const existingRomInPlatform = scannedPlatform?.roms.find(
+      (r) => r.id === rom.id,
+    );
+    if (existingRomInPlatform) {
       scannedPlatform.roms = scannedPlatform.roms.map((r) =>
         r.id === rom.id ? rom : r,
       );
@@ -157,6 +155,7 @@ onBeforeUnmount(() => {
   socket.off("scan:scanning_rom");
   socket.off("scan:done");
   socket.off("scan:done_ko");
+  processRomUpdates.cancel();
 });
 </script>
 <template>
diff --git a/frontend/src/composables/useAutoScroll.ts b/frontend/src/composables/useAutoScroll.ts
index 35515f543..19755a4b5 100644
--- a/frontend/src/composables/useAutoScroll.ts
+++ b/frontend/src/composables/useAutoScroll.ts
@@ -57,6 +57,7 @@ export const useAutoScroll = (
   };
 
   const cleanup = () => {
+    scrollToBottom.cancel();
     observer?.disconnect();
     observer = null;
   };