mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 21:33:18 +01:00
32 lines
999 B
Vue
32 lines
999 B
Vue
<template>
|
|
<div ref="root" class="flex min-h-[1px] justify-center">
|
|
<span class="loading loading-bars loading-md text-primary mt-4" v-show="isLoading"></span>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { onLoadMore = () => Promise.resolve(), enabled } = defineProps<{
|
|
onLoadMore: () => Promise<void>;
|
|
enabled: boolean;
|
|
}>();
|
|
|
|
const isLoading = ref(false);
|
|
const root = ref<HTMLElement>();
|
|
|
|
const observer = new IntersectionObserver(async (entries) => {
|
|
if (entries[0].intersectionRatio <= 0) return;
|
|
if (onLoadMore && enabled) {
|
|
const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;
|
|
const previousHeight = scrollingParent.scrollHeight;
|
|
isLoading.value = true;
|
|
await onLoadMore();
|
|
isLoading.value = false;
|
|
await nextTick();
|
|
scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
|
|
}
|
|
});
|
|
|
|
onMounted(() => observer.observe(root.value!));
|
|
onUnmounted(() => observer.disconnect());
|
|
</script>
|