refactor: add skeleton

webiny · Jan 13, 2025 · 42887da · 42887da
1 parent efecbbd
commit 42887da
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 59 deletions.
diff --git a/packages/admin-ui/src/Skeleton/Skeleton.tsx b/packages/admin-ui/src/Skeleton/Skeleton.tsx
@@ -4,7 +4,7 @@ import { cn, makeDecoratable } from "~/utils";
 const DecoratableSkeleton = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
     return (
         <div
-            className={cn("animate-pulse rounded-md bg-neutral-dimmed w-full h-full", className)}
+            className={cn("animate-pulse rounded-md bg-neutral-dimmed size-full", className)}
             {...props}
         />
     );

diff --git a/packages/app-aco/src/components/FolderTree/Loader/index.tsx b/packages/app-aco/src/components/FolderTree/Loader/index.tsx
@@ -1,11 +1,23 @@
 import React from "react";
 import { Skeleton } from "@webiny/ui/Skeleton";
-import { Container, SkeletonWrapper } from "./styled";
 
-export const Loader = ({ count }: { count?: number }) => {
+interface LoaderProps {
+    count?: number;
+}
+
+export const Loader = ({ count = 4 }: LoaderProps) => {
+    const lines = Array.from({ length: count });
+
     return (
-        <Container>
-            <Skeleton count={count ?? 4} inline={true} height={"100%"} wrapper={SkeletonWrapper} />
-        </Container>
+        <div className={"p-xs"}>
+            {lines.map((_, index) => {
+                return (
+                    <Skeleton
+                        key={`folder-skeleton-${index}`}
+                        className={"h-lg my-sm content-center"}
+                    />
+                );
+            })}
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/FolderTree/Loader/styled.tsx b/packages/app-aco/src/components/FolderTree/Loader/styled.tsx
diff --git a/packages/app-file-manager/src/components/Title/Title.tsx b/packages/app-file-manager/src/components/Title/Title.tsx
@@ -11,7 +11,7 @@ export interface TitleProps {
 export const Title = ({ title }: TitleProps) => {
     return (
         <Name use={"headline6"} tag={"h1"}>
-            {title || <Skeleton theme={"dark"} />}
+            {title || <Skeleton className={"h-lg"} />}
         </Name>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/Title.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/Title.tsx
@@ -9,7 +9,7 @@ interface TitleProps {
 export const Title = ({ title }: TitleProps) => {
     return (
         <Name use={"headline6"} tag={"h1"}>
-            {title || <Skeleton theme={"dark"} />}
+            {title || <Skeleton className={"h-lg"} />}
         </Name>
     );
 };
diff --git a/packages/app-page-builder/src/admin/components/Table/Header/Title/Title.tsx b/packages/app-page-builder/src/admin/components/Table/Header/Title/Title.tsx
@@ -11,7 +11,7 @@ export interface TitleProps {
 export const Title = ({ title }: TitleProps): ReactElement => {
     return (
         <Name use={"headline6"} tag={"h1"}>
-            {title !== undefined ? title : <Skeleton theme={"dark"} />}
+            {title || <Skeleton className={"h-lg"} />}
         </Name>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/Title/Title.tsx b/packages/app-trash-bin/src/Presentation/components/Title/Title.tsx
@@ -9,7 +9,7 @@ export interface TitleProps {
 export const Title = ({ title }: TitleProps) => {
     return (
         <Name use={"headline6"} tag={"h1"}>
-            {title || <Skeleton theme={"dark"} />}
+            {title || <Skeleton className={"h-lg"} />}
         </Name>
     );
 };
diff --git a/packages/ui/src/List/DataList/Loader.tsx b/packages/ui/src/List/DataList/Loader.tsx
@@ -13,39 +13,37 @@ const LoaderWrapper = styled("div")`
     display: flex;
     width: 100%;
     align-items: center;
-    justify-content: space-around;
+    justify-content: start;
+    gap: 24px;
 `;
 
 const Graphic = styled("div")`
     width: 36px;
+    height: 36px;
 `;
 
 const Data = styled("div")`
-    width: calc(-42px + 75%);
+    flex: 1;
+    height: 36px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+`;
 
-    .data-skeleton-container {
-        height: 36px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
+const ActionsContainer = styled("div")`
+    justify-self: end;
 `;
 
 const Actions = styled("div")`
-    width: calc(-42px + 25%);
-    margin-left: 10px;
     text-align: right;
-
-    .actions-skeleton-container {
-        height: 24px;
-        display: flex;
-        justify-content: end;
-    }
+    height: 24px;
+    display: flex;
+    justify-content: end;
+    gap: 8px;
 
     .actions-skeleton {
         width: 24px;
         height: 24px;
-        margin-left: 16px;
     }
 `;
 
@@ -58,23 +56,19 @@ const Loader = (): ReactElement => {
                 <li key={"list-" + line}>
                     <LoaderWrapper>
                         <Graphic>
-                            <Skeleton height={36} />
+                            <Skeleton />
                         </Graphic>
                         <Data>
-                            <Skeleton
-                                inline={true}
-                                count={2}
-                                containerClassName={"data-skeleton-container"}
-                            />
+                            <Skeleton className={"h-md"} />
+                            <Skeleton className={"h-md"} />
                         </Data>
-                        <Actions>
-                            <Skeleton
-                                inline={true}
-                                count={2}
-                                className={"actions-skeleton"}
-                                containerClassName={"actions-skeleton-container"}
-                            />
-                        </Actions>
+                        <ActionsContainer>
+                            {" "}
+                            <Actions>
+                                <Skeleton className={"actions-skeleton"} />
+                                <Skeleton className={"actions-skeleton"} />
+                            </Actions>
+                        </ActionsContainer>
                     </LoaderWrapper>
                 </li>
             ))}

diff --git a/packages/ui/src/Skeleton/Skeleton.tsx b/packages/ui/src/Skeleton/Skeleton.tsx
@@ -28,6 +28,6 @@ export interface SkeletonProps {
  * @deprecated This component is deprecated and will be removed in future releases.
  * Please use the `Skeleton` component from the `@webiny/admin-ui` package instead.
  */
-export const Skeleton = ({}: SkeletonProps) => {
-    return <AdminSkeleton className={"w-full, h-full"} />;
+export const Skeleton = ({ className }: SkeletonProps) => {
+    return <AdminSkeleton className={className} />;
 };