Update Table UI loader, Add border animation

primefaces · Jan 12, 2024 · ecc117f · ecc117f · vercel · Jan 12, 2024
1 parent efea09a
commit ecc117f
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 12 deletions.
diff --git a/components/demo/DeferredDemo.js b/components/demo/DeferredDemo.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useRef, useState } from 'react';
 
 const DeferredDemo = ({ options, children, onLoad }) => {
     const [visible, setVisible] = useState(false);
@@ -7,7 +7,7 @@ const DeferredDemo = ({ options, children, onLoad }) => {
     const observerRef = useRef(null);
     const elementRef = useRef(null);
 
-    useEffect(() => {
+    /*useEffect(() => {
         const handleIntersection = ([entry]) => {
             clearTimeout(timeoutRef.current);
 
@@ -33,13 +33,13 @@ const DeferredDemo = ({ options, children, onLoad }) => {
 
             clearTimeout(timeoutRef.current);
         };
-    }, [visible, onLoad, options]);
+    }, [visible, onLoad, options]);*/
 
     return (
         <>
             {!visible && (
-                <div ref={elementRef} className="demo-section-loading">
-                    Loading...
+                <div ref={elementRef} class="card">
+                    <div class="deferred-demo-loading"></div>
                 </div>
             )}
             {visible && children}

diff --git a/styles/layout/_doc.scss b/styles/layout/_doc.scss
@@ -61,15 +61,34 @@
     }
 }
 
-.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%);
+    }
 }
 
 .doc-tabpanel,

diff --git a/styles/layout/landing/_main.scss b/styles/layout/landing/_main.scss
@@ -7,6 +7,52 @@
         border: 1px solid var(--home-border-color);
         border-radius: 10px;
         background-color: var(--home-box-bg);
+        position: relative;
+        z-index: 0;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid var(--home-box-ring-color);
+            transition: all .5s;
+            animation: clippath 3s infinite linear;
+            border-radius: 10px;
+            opacity: 0;
+            z-index: -1;
+        }
+
+        &::after {
+            animation: clippath 3s infinite -1.5s linear;
+        }
+
+        &:hover {
+            &::before,
+            &::after {
+                opacity: 1;
+            }
+        }
+    }
+
+    @keyframes clippath {
+        0%,
+        100% {
+            clip-path: inset(0 0 98% 0);
+        }
+
+        25% {
+            clip-path: inset(0 98% 0 0);
+        }
+        50% {
+            clip-path: inset(98% 0 0 0);
+        }
+        75% {
+            clip-path: inset(0 0 0 98%);
+        }
     }
 
     .linkbox {

diff --git a/styles/layout/variables/landing/_dark.scss b/styles/layout/variables/landing/_dark.scss
@@ -49,4 +49,5 @@
     --home-templates-btn-border-bottom:4px solid #424b57;
     --home-templates-btn-border-left:3px solid #424b57;
     --home-features-card-shadow: none;
+    --home-box-ring-color: rgba(34, 211, 238, .3)
 }
diff --git a/styles/layout/variables/landing/_light.scss b/styles/layout/variables/landing/_light.scss
@@ -49,4 +49,5 @@
     --home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
     --home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
     --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
+    --home-box-ring-color: var(--primary-100);
 }