diff --git a/src/lib/components/PaginationTable/PaginationTableBody.svelte b/src/lib/components/PaginationTable/PaginationTableBody.svelte index f549fa5..9638b55 100644 --- a/src/lib/components/PaginationTable/PaginationTableBody.svelte +++ b/src/lib/components/PaginationTable/PaginationTableBody.svelte @@ -5,44 +5,45 @@ let bodyElem: HTMLTableSectionElement; - function intersectionViewer() { - let updating = false; - let intersectionElement = - bodyElem.rows.item(bodyElem.rows.length - 5) || bodyElem.lastElementChild; + let intersectionObserver: IntersectionObserver; - new IntersectionObserver( - async (entries, observer) => { - if (entries.filter((e) => e.isIntersecting).length === 0 || updating) return; - - updating = true; - - const rows = bodyElem.rows.length; - - await onUpdate(); - await tick(); - observer.disconnect(); - - updating = false; - - if (rows === bodyElem.rows.length) return; - - intersectionViewer(); - }, - { threshold: 1.0 } - ).observe(intersectionElement!); + let intersectionElement; + function getIntersectionElement() { + intersectionElement = + bodyElem.rows.item(bodyElem.rows.length - 10) || bodyElem.lastElementChild; } onMount(async () => { await onUpdate(); await tick(); - new MutationObserver((entries) => { - if (entries.filter((e) => e.removedNodes.length > 0).length === 0) return; + intersectionObserver = new IntersectionObserver( + async (entries, observer) => { + if (entries.filter((e) => e.isIntersecting).length === 0 || !entries) return; - intersectionViewer(); + const rows = bodyElem.rows.length; + + await onUpdate(); + await tick(); + + observer.unobserve(intersectionElement!); + if (rows === bodyElem.rows.length) return; + getIntersectionElement(); + observer.observe(intersectionElement!); + }, + { threshold: 1.0 } + ); + + new MutationObserver((entries) => { + if (entries.filter((e) => e.removedNodes.length > 0).length === 0 || !entries) return; + + intersectionObserver.unobserve(intersectionElement!); + getIntersectionElement(); + intersectionObserver.observe(intersectionElement!); }).observe(bodyElem, { childList: true }); - intersectionViewer(); + getIntersectionElement(); + intersectionObserver.observe(intersectionElement!); });