@lowdefy/blocks-loaders 5.0.0 → 5.2.0

package/dist/blocks/Skeleton/style.module.css

@@ -18,34 +18,36 @@
   .skeleton {
     position: relative;
     overflow: hidden;
-    background: var(--ant-color-fill-tertiary);
+    background-color: var(--ant-color-fill-secondary);
+    border-radius: var(--ant-border-radius-sm, 4px);
+    isolation: isolate;
   }
 
-  .skeleton::before {
+  .skeleton::after {
     content: '';
-    display: block;
     position: absolute;
-    left: -100%;
-    max-width: 600px;
-    top: 0;
-    height: 200%;
-    width: 100%;
-    background: linear-gradient(
-      to right,
+    inset: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
       transparent 0%,
-      var(--ant-color-fill-secondary) 50%,
+      var(--ant-color-fill-quaternary) 20%,
+      var(--ant-color-fill) 60%,
       transparent 100%
     );
-    animation: load 1.8s infinite;
-    /* transform: rotate(45deg); */
+    animation: skeleton-shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    will-change: transform;
   }
 
-  @keyframes load {
-    from {
-      left: -100%;
+  @keyframes skeleton-shimmer {
+    100% {
+      transform: translateX(100%);
     }
-    to {
-      left: 100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton::after {
+      animation: none;
     }
   }
 }

package/dist/blocks/SkeletonAvatar/SkeletonAvatar.js

@@ -30,11 +30,12 @@ const SkeletonAvatar = ({ classNames, properties, styles })=>{
                 size = 32;
         }
     }
+    const borderRadius = properties.shape === 'square' ? 'var(--ant-border-radius-lg, 8px)' : size / 2;
     return /*#__PURE__*/ React.createElement(Skeleton, {
         classNames: classNames,
         styles: {
             element: {
-                borderRadius: properties.shape === 'square' ? '0' : size / 2,
+                borderRadius,
                 ...styles?.element
             }
         },

package/dist/blocks/SkeletonButton/SkeletonButton.js

@@ -27,11 +27,12 @@ const SkeletonButton = ({ classNames, properties, styles })=>{
         default:
             height = 32;
     }
+    const borderRadius = properties.shape === 'round' ? height / 2 : 'var(--ant-border-radius, 6px)';
     return /*#__PURE__*/ React.createElement(Skeleton, {
         classNames: classNames,
         styles: {
             element: {
-                borderRadius: properties.shape === 'round' && height / 2,
+                borderRadius,
                 ...styles?.element
             }
         },

package/dist/blocks/SkeletonInput/SkeletonInput.js

@@ -29,11 +29,16 @@ const SkeletonInput = ({ classNames, properties, styles })=>{
     }
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames?.element,
-        style: styles?.element
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10,
+            ...styles?.element
+        }
     }, properties.label !== false && /*#__PURE__*/ React.createElement(Skeleton, {
         styles: {
             element: {
-                marginBottom: 10
+                borderRadius: 'var(--ant-border-radius-sm, 4px)'
             }
         },
         properties: {
@@ -42,7 +47,10 @@ const SkeletonInput = ({ classNames, properties, styles })=>{
         }
     }), /*#__PURE__*/ React.createElement(Skeleton, {
         styles: {
-            element: styles?.input ?? {}
+            element: {
+                borderRadius: 'var(--ant-border-radius, 6px)',
+                ...styles?.input
+            }
         },
         properties: {
             width: properties.width ?? '100%',

package/dist/blocks/SkeletonParagraph/SkeletonParagraph.js

@@ -23,18 +23,16 @@ const SkeletonParagraph = ({ classNames, properties, styles })=>{
         className: classNames?.element,
         style: {
             width: properties.width ?? '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.75rem',
             ...styles?.element
         }
     }, lines.map((key)=>/*#__PURE__*/ React.createElement(Skeleton, {
             key: key,
-            styles: {
-                element: {
-                    marginBottom: '1rem'
-                }
-            },
             properties: {
-                height: '1.25rem',
-                width: key === lines.length - 1 && key !== 0 ? '40%' : '100%'
+                height: '0.875rem',
+                width: key === lines.length - 1 && key !== 0 ? '60%' : '100%'
             }
         })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-loaders",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "license": "Apache-2.0",
   "description": "Lowdefy loader blocks.",
   "homepage": "https://lowdefy.com",
@@ -42,16 +42,16 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "5.0.0",
-    "@lowdefy/helpers": "5.0.0"
+    "@lowdefy/block-utils": "5.2.0",
+    "@lowdefy/helpers": "5.2.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.0.0",
-    "@lowdefy/e2e-utils": "5.0.0",
+    "@lowdefy/block-dev-e2e": "5.2.0",
+    "@lowdefy/e2e-utils": "5.2.0",
     "@playwright/test": "1.50.1",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",