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