fix(knowledge): debounce scroll handler with rAF to prevent duplicate page loads
Coalesces rapid scroll events into one check per animation frame so that page++ can only fire once per frame, eliminating the window where multiple events slip through before loading=true is observed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -245,15 +245,21 @@ function formatDate(iso: string): string {
|
|||||||
// ─── Infinite scroll ──────────────────────────────────────────────────────────
|
// ─── Infinite scroll ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
const cardGridEl = ref<HTMLElement | null>(null);
|
const cardGridEl = ref<HTMLElement | null>(null);
|
||||||
|
let scrollRafId: number | null = null;
|
||||||
|
|
||||||
function onGridScroll() {
|
function onGridScroll() {
|
||||||
const el = cardGridEl.value;
|
// Debounce via rAF — coalesces rapid scroll events into one check per frame
|
||||||
if (!el || loading.value || items.value.length >= total.value) return;
|
if (scrollRafId !== null) return;
|
||||||
const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 300;
|
scrollRafId = requestAnimationFrame(() => {
|
||||||
if (nearBottom) {
|
scrollRafId = null;
|
||||||
page.value++;
|
const el = cardGridEl.value;
|
||||||
fetchItems();
|
if (!el || loading.value || items.value.length >= total.value) return;
|
||||||
}
|
const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 300;
|
||||||
|
if (nearBottom) {
|
||||||
|
page.value++;
|
||||||
|
fetchItems();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Lifecycle ────────────────────────────────────────────────────────────────
|
// ─── Lifecycle ────────────────────────────────────────────────────────────────
|
||||||
@@ -266,6 +272,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (searchDebounce) clearTimeout(searchDebounce);
|
if (searchDebounce) clearTimeout(searchDebounce);
|
||||||
|
if (scrollRafId !== null) cancelAnimationFrame(scrollRafId);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user