Add lazy loader component

Author: graphieros

src/components/BaseLazy.vue

@@ -0,0 +1,121 @@
+<template>
+    <component :is="tag" ref="hostEl">
+        <slot v-if="isVisible" />
+        <slot v-else name="placeholder" />
+    </component>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount, ref, watch, computed } from "vue";
+
+const props = defineProps({
+    bounds: { type: String, default: '500px' },
+    threshold: { type: [Number, Array], default() { return 0 } },
+    once: { type: Boolean, default: false },
+    root: { type: [String, HTMLElement], default: null },
+    tag: { type: String, default: 'div' },
+    enabled: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(['enter', 'leave', 'load', 'change'])
+
+const hostEl = ref(null);
+const isVisible = ref(false);
+let observer = null;
+let hasLoadedOnce = false;
+
+const resolvedRoot = computed(() => {
+    if (!props.root) return null;
+    if (props.root instanceof HTMLElement) return props.root;
+    try {
+        const el = document.querySelector(props.root);
+        return el instanceof HTMLElement ? el : null;
+    } catch {
+        return null;
+    }
+});
+
+function createObserver() {
+    if (typeof window === "undefined" || !("IntersectionObserver" in window)) {
+        // SSR or unsupported: reveal immediately
+        reveal();
+        return;
+    }
+    if (!hostEl.value) return;
+
+    destroyObserver();
+
+    observer = new IntersectionObserver(
+        (entries) => {
+            const entry = entries[0];
+            const visible = entry.isIntersecting;
+
+            if (visible) {
+                if (!hasLoadedOnce) {
+                    reveal();
+                    emit("load");
+                    hasLoadedOnce = true;
+                }
+                emit("enter");
+                if (props.once) {
+                    destroyObserver();
+                }
+            } else {
+                emit("leave");
+            }
+
+            isVisible.value = visible;
+            emit("change", visible);
+        },
+        {
+            root: resolvedRoot.value,
+            rootMargin: props.bounds,
+            threshold: props.threshold,
+        }
+    );
+
+    observer.observe(hostEl.value);
+}
+
+function destroyObserver() {
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
+}
+
+function reveal() {
+    isVisible.value = true;
+}
+
+onMounted(() => {
+    if (props.enabled) createObserver();
+});
+
+onBeforeUnmount(() => {
+    destroyObserver();
+});
+
+watch(
+    () => [props.bounds, props.threshold, props.root, props.enabled],
+    ([, , , enabled]) => {
+        if (!enabled) {
+            destroyObserver();
+            return;
+        }
+        createObserver();
+    }
+);
+
+
+function refresh() {
+    if (props.enabled) createObserver();
+}
+
+function revealNow() {
+    destroyObserver();
+    reveal();
+}
+
+defineExpose({ refresh, revealNow, isVisible });
+</script>

src/components/BaseSpinner.vue

@@ -1,29 +1,55 @@
 <script setup>
-import { ref, computed } from "vue";
+import { computed } from "vue";
 import { useMainStore } from "../stores";
 
+const props = defineProps({
+    visible: { type: Boolean, default: true },
+    duration: { type: Number, default: 250 },
+    easing: { type: String, default: "ease" },
+});
+
 const store = useMainStore();
-const isDarkMode = computed(() => {
-    return store.isDarkMode;
-})
+const isDarkMode = computed(() => store.isDarkMode);
 
+const fadeStyle = computed(() => ({
+    "--fade-duration": `${props.duration}ms`,
+    "--fade-easing": props.easing,
+    "z-index": "2147483640"
+}));
 </script>
 
 <template>
-    <div class="fixed top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">
-        <img class="loader-logo fixed top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" alt="Vue Data UI logo" src="../assets/logo.png" width="80" height="80"/>
-        <span :class="{ 'loader': true, 'loader-dark': isDarkMode, 'loader-light': !isDarkMode }"></span>
-    </div>
+    <Transition name="fade" appear>
+        <div v-if="props.visible" class="fixed top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" :style="fadeStyle">
+            <img class="loader-logo fixed top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" alt="Vue Data UI logo"
+                src="../assets/logo.png" width="80" height="80" />
+            <span :class="{
+                loader: true,
+                'loader-dark': isDarkMode,
+                'loader-light': !isDarkMode,
+            }"></span>
+        </div>
+    </Transition>
 </template>
 
 <style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity var(--fade-duration) var(--fade-easing);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
 
 .loader-dark,
 .loader-light {
     border-top: 4px solid #5f8aee;
 }
 
 .loader {
+    position: relative;
     width: 120px;
     height: 120px;
     border-radius: 50%;
@@ -34,8 +60,7 @@ const isDarkMode = computed(() => {
 }
 
 .loader::after {
-    content: '';
-    box-sizing: border-box;
+    content: "";
     position: absolute;
     left: 0;
     top: 0;
@@ -64,8 +89,22 @@ const isDarkMode = computed(() => {
     from {
         transform: translateX(-50%) translateY(-50%) scale(0.5);
     }
+
     to {
         transform: translateX(-50%) translateY(-50%) scale(1);
     }
 }
-</style>
+
+@media (prefers-reduced-motion: reduce) {
+
+    .loader,
+    .loader-logo {
+        animation: none;
+    }
+
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: none;
+    }
+}
+</style>

src/components/BaseSuspense.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { ref } from "vue";
+import BaseSpinner from "./BaseSpinner.vue";
+
+const showSpinner = ref(true);
+
+function onFallback() { showSpinner.value = true; }
+function onResolve() { showSpinner.value = false; }
+</script>
+
+<template>
+    <BaseSpinner :visible="showSpinner" :duration="300" easing="ease-in-out" />
+
+    <Suspense @fallback="onFallback" @resolve="onResolve">
+        <template #default>
+            <slot name="default"/>
+        </template>
+        <template #fallback>
+            <slot name="fallback"/>
+        </template>
+    </Suspense>
+</template>

src/components/Header.vue

@@ -73,16 +73,28 @@ function openChartMaker() {
     chartMkr.value.openDialog();
 }
 
-function changeTheme() {
+function updateTheme() {
     if (localStorage.theme === "dark") {
-        localStorage.theme = "light";
-        document.documentElement.classList.remove("dark");
-        store.isDarkMode = false;
-    } else {
-        localStorage.theme = "dark";
-        document.documentElement.classList.add("dark");
-        store.isDarkMode = true;
+            localStorage.theme = "light";
+            document.documentElement.classList.remove("dark");
+            store.isDarkMode = false;
+        } else {
+            localStorage.theme = "dark";
+            document.documentElement.classList.add("dark");
+            store.isDarkMode = true;
+        }
+}
+
+function changeTheme() {
+
+    if (!document.startViewTransition) {
+        updateTheme();
+        return;
     }
+
+    document.startViewTransition(() => {
+        updateTheme();
+    })
 }
 
 const currentRoute = computed(() => {

src/style.css

@@ -258,4 +258,30 @@ input[type="range"]:hover {
 .code-container {
   box-shadow: inset 0 4px 6px rgba(0,0,0,0.2), inset 0 -3px 4px rgba(255,255,255,0.2);
   border-radius: 14px !important;
+}
+
+
+@media (prefers-reduced-motion: no-preference) {
+  ::view-transition-old(root) {
+    animation-delay: 500ms;
+  }
+  
+  ::view-transition-new(root) {
+    animation: circle-in 500ms;
+  }
+  
+  /* @keyframes move-in {
+    from { translate: 100% 0; }
+    to { translate: 0 0; }
+  }
+  
+  @keyframes move-out {
+    from { translate: 0 0; }
+    to { translate: -100% 0; }
+  } */
+
+  @keyframes circle-in {
+    from { clip-path: circle(0% at 100% 0%); }
+    to { clip-path: circle(150% at 100% 0%); }
+  }
 }

src/useExamples.js

@@ -880,7 +880,8 @@ export default function useExamples() {
                 series: ds,
                 scaleMin: 0,
                 scaleMax: 100,
-                scaleSteps: 3
+                scaleSteps: 3,
+                dataLabels: false
             },
             {
                 name: 'Channel 2',
@@ -889,7 +890,8 @@ export default function useExamples() {
                 color: colors.value.orange,
                 scaleMin: 0,
                 scaleMax: 60,
-                scaleSteps: 5
+                scaleSteps: 5,
+                dataLabels: false
             }
         ]
     })