CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

fix pagination failing if data is loaded too slow into dom
All checks were successful
delpoy / build-and-deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
bytedream 2024-11-29 12:37:13 +01:00
parent 97f10da146
commit c89cbdd389
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/components/PaginationTable/PaginationTableBody.svelte
View File

@ -7,10 +7,19 @@
let intersectionObserver: IntersectionObserver;
let intersectionElement;
function getIntersectionElement() {
intersectionElement =
bodyElem.rows.item(bodyElem.rows.length - 15) || bodyElem.lastElementChild;
let intersectionElement: HTMLElement;
async function getIntersectionElement(): Promise<HTMLElement> {
if (!bodyElem.lastElementChild) {
await new Promise<void>((resolve) => {
new MutationObserver((_, observer) => {
if (!bodyElem.lastElementChild) return;
observer.disconnect();
resolve();
});
});
}
return bodyElem.rows.item(bodyElem.rows.length - 15)! || bodyElem.lastElementChild!;
}
onMount(async () => {
@ -20,7 +29,7 @@
intersectionObserver = new IntersectionObserver(
async (entries, observer) => {
if (entries.filter((e) => e.isIntersecting).length === 0 || !entries) return;
observer.unobserve(intersectionElement!);
observer.unobserve(intersectionElement);
const rows = bodyElem.rows.length;
@ -28,22 +37,19 @@
await tick();
if (rows === bodyElem.rows.length) return;
getIntersectionElement();
observer.observe(intersectionElement!);
observer.observe((intersectionElement = await getIntersectionElement()));
},
{ threshold: 0.25 }
);
new MutationObserver((entries) => {
new MutationObserver(async (entries) => {
if (entries.filter((e) => e.removedNodes.length > 0).length === 0 || !entries) return;
intersectionObserver.unobserve(intersectionElement!);
getIntersectionElement();
intersectionObserver.observe(intersectionElement!);
intersectionObserver.unobserve(intersectionElement);
intersectionObserver.observe((intersectionElement = await getIntersectionElement()));
}).observe(bodyElem, { childList: true });
getIntersectionElement();
intersectionObserver.observe(intersectionElement!);
intersectionObserver.observe((intersectionElement = await getIntersectionElement()));
});
</script>