Improve DataTable demo performance

components/demo/DeferredDemo.vue

@@ -0,0 +1,55 @@
+<template>
+    <div v-if="!visible" class="demo-section-loading">Loading...</div>
+    <slot v-else></slot>
+</template>
+
+<script>
+export default {
+    name: 'DeferredDemo',
+    emits: ['load'],
+    props: {
+        options: {
+            type: Object,
+            default: null
+        }
+    },
+    data() {
+        return {
+            visible: false
+        };
+    },
+    observer: null,
+    timeout: null,
+    mounted() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            clearTimeout(this.timeout);
+
+            if (entry.isIntersecting) {
+                this.timeout = setTimeout(() => {
+                    this.visible = true;
+                    this.observer.unobserve(this.$el);
+                    this.$emit('load');
+                }, 350);
+            }
+        }, this.options);
+
+        this.observer.observe(this.$el);
+    },
+    beforeUnmount() {
+        !this.visible && this.$el && this.observer?.unobserve(this.$el);
+        clearTimeout(this.timeout);
+    }
+};
+</script>
+<style>
+.demo-section-loading {
+    display: grid;
+    place-items: center;
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    font-size: 2rem;
+    height: 350px;
+    background: var(--maskbg);
+}
+</style>