From 9fa11c7b60ff13031eb85958b8180ab6b45a969a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 12 Jan 2024 14:24:12 +0300
Subject: [PATCH] Cosmetics on Deferred Demo loader

---
 components/demo/DeferredDemo.vue | 41 +++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/components/demo/DeferredDemo.vue b/components/demo/DeferredDemo.vue
index 508ec6f03..aab05ad30 100644
--- a/components/demo/DeferredDemo.vue
+++ b/components/demo/DeferredDemo.vue
@@ -1,5 +1,9 @@
 <template>
-    <div v-if="!visible" class="demo-section-loading">Loading...</div>
+    <div v-if="!visible">
+        <div class="card">
+            <div class="deferred-demo-loading"></div>
+        </div>
+    </div>
     <slot v-else></slot>
 </template>
 
@@ -42,14 +46,35 @@ export default {
 };
 </script>
 <style>
-.demo-section-loading {
-    display: grid;
-    place-items: center;
-    padding: 2rem;
+.deferred-demo-loading {
     border-radius: 10px;
-    margin-bottom: 1rem;
-    font-size: 2rem;
     height: 350px;
-    background: var(--maskbg);
+    position: relative;
+    overflow: hidden;
+}
+
+.deferred-demo-loading::after {
+    content: '';
+    animation: deferred-demo-loading 1.2s infinite;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    transform: translateX(-100%);
+    z-index: 1;
+    border-radius: 10px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface-100), rgba(255, 255, 255, 0));
+}
+
+
+
+@keyframes deferred-demo-loading {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
 }
 </style>