Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 1,304 Bytes
5290cbb a1a6daf 5290cbb a1a6daf 5290cbb a1a6daf 5290cbb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<script lang="ts">
import { onMount, createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
let loader: HTMLDivElement | undefined = $state();
let observer: IntersectionObserver;
let intervalId: ReturnType<typeof setInterval> | undefined;
onMount(() => {
if (!loader) {
return;
}
observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Clear any existing interval
if (intervalId) {
clearInterval(intervalId);
}
// Start new interval that dispatches every 250ms
intervalId = setInterval(() => {
dispatch("visible");
}, 250);
} else {
// Clear interval when not intersecting
if (intervalId) {
clearInterval(intervalId);
intervalId = undefined;
}
}
});
});
observer.observe(loader);
return () => {
observer.disconnect();
if (intervalId) {
clearInterval(intervalId);
}
};
});
</script>
<div bind:this={loader} class="flex animate-pulse flex-col gap-4">
<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700"></div>
<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700"></div>
<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700"></div>
</div>
|