From 2585e7c8f6c7f5a37d97e7712f9fb293bd4f6065 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 12 Jan 2024 21:56:10 +0300
Subject: [PATCH] Update table loading UI

---
 src/app/showcase/demo/deferreddemo.scss | 33 +++++++++++++++++++------
 src/app/showcase/demo/deferreddemo.ts   |  4 ++-
 src/assets/showcase/data/menu.json      | 26 +++++++++----------
 3 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/app/showcase/demo/deferreddemo.scss b/src/app/showcase/demo/deferreddemo.scss
index 02eb23994ea..1d0881b61e4 100755
--- a/src/app/showcase/demo/deferreddemo.scss
+++ b/src/app/showcase/demo/deferreddemo.scss
@@ -1,10 +1,29 @@
-.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%);
+    }
 }
\ No newline at end of file
diff --git a/src/app/showcase/demo/deferreddemo.ts b/src/app/showcase/demo/deferreddemo.ts
index c4f76e9fbc6..d83d5ea7cc6 100755
--- a/src/app/showcase/demo/deferreddemo.ts
+++ b/src/app/showcase/demo/deferreddemo.ts
@@ -7,7 +7,9 @@ import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, PLA
     imports: [CommonModule],
     template: `
         @if(!visible){
-        <div class="demo-section-loading">Loading...</div>
+            <div class="card">
+                <div class="deferred-demo-loading"></div>
+            </div>
         } @else {
         <ng-content></ng-content>
         }
diff --git a/src/assets/showcase/data/menu.json b/src/assets/showcase/data/menu.json
index 18ab16cfa56..5264d08626b 100644
--- a/src/assets/showcase/data/menu.json
+++ b/src/assets/showcase/data/menu.json
@@ -151,18 +151,10 @@
                 {
                     "name": "Data",
                     "children": [
-                        {
-                            "name": "Table",
-                            "routerLink": "/table"
-                        },
                         {
                             "name": "DataView",
                             "routerLink": "/dataview"
                         },
-                        {
-                            "name": "Scroller",
-                            "routerLink": "/scroller"
-                        },
                         {
                             "name": "OrderList",
                             "routerLink": "/orderlist"
@@ -180,17 +172,25 @@
                             "routerLink": "/picklist"
                         },
                         {
-                            "name": "Tree",
-                            "routerLink": "/tree"
+                            "name": "Scroller",
+                            "routerLink": "/scroller"
                         },
                         {
-                            "name": "TreeTable",
-                            "routerLink": "/treetable"
+                            "name": "Table",
+                            "routerLink": "/table"
                         },
                         {
                             "name": "Timeline",
                             "routerLink": "/timeline"
-                        }
+                        },
+                        {
+                            "name": "Tree",
+                            "routerLink": "/tree"
+                        },
+                        {
+                            "name": "TreeTable",
+                            "routerLink": "/treetable"
+                        }   
                     ]
                 },
                 {