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();
+
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(() =>
-
+
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index 1512724f9..09e26772e 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -1,7 +1,8 @@
diff --git a/frontend/src/composables/useAutoScroll.ts b/frontend/src/composables/useAutoScroll.ts
index 922e02797..19755a4b5 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,18 +32,32 @@ 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();
};
const cleanup = () => {
+ scrollToBottom.cancel();
observer?.disconnect();
observer = null;
};