mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-24 06:28:42 +01:00
412a10256d
* WIP vue3 * WIP vue3 * WIP vue3 * Migrates to vitejs * Fixes js tests and removes not needed modules * Fixes unmount * Updates to use css instead for space * Fixes tests and rebases one more time * Uses orgua * Fixes migrations bugs with oruga and fixes scroll * Fixes v-deep * Fixes icons to prod * Fixes icons to prod * Adds favicon back * Transitions some to composition api * Updates another component to comp api * Cleans defineProps * Updates log messages * Moves more to compose api * Cleans up styles and rewrites event source * Tries to fix DOMPurify * Removes postcss * WIP typescript * Improves importing * Converts all to ts * Converts main to ts * Makes changes for tsconfig * Moves more to ts * Adds typing to store * More typing * Updates to ts * Updates the rest to ts * Fixes computes * Fixes unmount * Adds cypress with custom base fixed * Fixes jest tests * Fixes golang tests * Adds gitignore for cypress * Removes int in favor of e2e with cypress * Tries to fix int tests again * Adds title * Updates e2e tests * Uses vue for isMobile * Removes app spec * Cleans up docker * Adds drop down for settings * Fixes bug with restart * Fixes scroll up bug * Adds tests for light mode
76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<div ref="root" class="infinte-loader">
|
|
<div class="spinner" v-show="isLoading">
|
|
<div class="bounce1"></div>
|
|
<div class="bounce2"></div>
|
|
<div class="bounce3"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
|
|
|
const props = defineProps({
|
|
onLoadMore: Function,
|
|
enabled: Boolean,
|
|
});
|
|
|
|
const isLoading = ref(false);
|
|
const root = ref<HTMLElement>();
|
|
|
|
const observer = new IntersectionObserver(async (entries) => {
|
|
if (entries[0].intersectionRatio <= 0) return;
|
|
if (props.onLoadMore && props.enabled) {
|
|
const scrollingParent = root.value.closest("[data-scrolling]") || document.documentElement;
|
|
const previousHeight = scrollingParent.scrollHeight;
|
|
isLoading.value = true;
|
|
await props.onLoadMore();
|
|
isLoading.value = false;
|
|
await nextTick();
|
|
scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
|
|
}
|
|
});
|
|
|
|
onMounted(() => observer.observe(root.value));
|
|
onUnmounted(() => observer.disconnect());
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.infinte-loader {
|
|
min-height: 1px;
|
|
}
|
|
.spinner {
|
|
margin: 10px auto 0;
|
|
width: 70px;
|
|
text-align: center;
|
|
|
|
& > div {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: var(--primary-color);
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
animation: sk-bouncedelay 0.8s infinite ease-in-out both;
|
|
}
|
|
& .bounce1 {
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
& .bounce2 {
|
|
animation-delay: -0.16s;
|
|
}
|
|
}
|
|
|
|
@keyframes sk-bouncedelay {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|