Update table loading UI

primefaces · Jan 12, 2024 · 2585e7c · 2585e7c · vercel · Jan 12, 2024
1 parent 720a20c
commit 2585e7c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git 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%);
+    }
 }
diff --git 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
@@ -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"
+                        }   
                     ]
                 },
                 {