page skeletons

Author: LuizFNJ

src/components/Skeleton/ClaimSkeleton.tsx

@@ -1,35 +1,35 @@
-import { Col, Skeleton } from "antd";
+import { Grid, Skeleton } from "@mui/material";
 import React from "react";
 
 const ClaimSkeleton = () => {
+    const textSkeletons = Array.from({ length: 5 });
+
     return (
-        <Col
-            sm={22}
-            md={14}
-            lg={12}
+        <Grid item
+            sm={11}
+            md={7}
+            lg={6}
             style={{
                 marginBottom: "10px",
             }}
         >
-            <Skeleton
-                active
-                paragraph={{ rows: 5 }}
-                round={true}
-                style={{
-                    width: "100%",
-                }}
-            />
-            <Col
+            <Skeleton variant="text" width="30%" animation="wave" />
+            {textSkeletons.map((_, i) => (
+                <Skeleton key={i} variant="text" width="100%" animation="wave" />
+            ))}
+            <Skeleton variant="text" width="60%" animation="wave" />
+
+            <Grid item
                 style={{
                     display: "flex",
-                    justifyContent: "flex-end",
+                    justifyContent: "space-between",
                     padding: "10px 0",
                 }}
             >
-                <Skeleton title={false} paragraph={{ rows: 1 }} />
-                <Skeleton.Button active />
-            </Col>
-        </Col>
+                <Skeleton variant="text" width="50%" animation="wave" />
+                <Skeleton variant="rectangular" width={60} height={30} animation="wave" />
+            </Grid>
+        </Grid>
     );
 };
 

src/components/Skeleton/HistorySkeleton.tsx

@@ -1,13 +1,13 @@
-import { Skeleton } from "antd";
+import { Skeleton } from "@mui/material";
 import React from "react";
 
 const HistorySkeleton = () => {
     return (
         <Skeleton
-            style={{ marginTop: 16 }}
-            title={false}
-            paragraph={{ rows: 1, width: "100%" }}
-            active
+            variant="text"
+            width="100%"
+            animation="wave"
+            style={{ marginBottom: 15 }}
         />
     );
 };

src/components/Skeleton/KanbanSkeleton.tsx

@@ -1,24 +1,21 @@
-import { Col, Skeleton } from "antd";
+import { Grid, Skeleton } from "@mui/material";
 import React from "react";
 
 const KanbanSkeleton = () => {
     return (
-        <Col style={{ width: "95%" }}>
-            <Skeleton
-                style={{ marginTop: 16 }}
-                paragraph={{ rows: 1, width: "100%" }}
-                active
-            />
-            <Col
+        <Grid item style={{ width: "95%" }}>
+            <Skeleton variant="text" width="40%" animation="wave" />
+            <Skeleton variant="text" width="100%" animation="wave" />
+            <Grid item
                 style={{
                     display: "flex",
                     justifyContent: "flex-end",
                     padding: "10px 0",
                 }}
             >
-                <Skeleton.Button active style={{ height: 16, width: 150 }} />
-            </Col>
-        </Col>
+                <Skeleton variant="text" width="50%" animation="wave" />
+            </Grid>
+        </Grid>
     );
 };
 

src/components/Skeleton/ReviewCarouselSkeleton.tsx

@@ -1,20 +1,27 @@
-import { Skeleton } from "antd";
+import { Skeleton } from "@mui/material";
 import React from "react";
 import CardBase from "../CardBase";
 
 const ReviewCarouselSkeleton = () => {
+    const textSkeletons = Array.from({ length: 5 });
+
     return (
         <CardBase style={{ width: "fit-content", minWidth: "100%" }}>
             <div style={{ flex: 1, padding: "24px 32px" }}>
-                <Skeleton active paragraph={{ rows: 5 }} round={true} />
+                <Skeleton variant="text" width="30%" animation="wave" />
+                {textSkeletons.map((_, i) => (
+                    <Skeleton key={i} variant="text" width="100%" animation="wave" />
+                ))}
+                <Skeleton variant="text" width="60%" animation="wave" />
                 <div
                     style={{
                         display: "flex",
+                        justifyContent: "space-between",
                         padding: "10px 0",
                     }}
                 >
-                    <Skeleton title={false} paragraph={{ rows: 1 }} />
-                    <Skeleton.Button active />
+                    <Skeleton variant="text" width="50%" animation="wave" />
+                    <Skeleton variant="rectangular" width={60} height={30} animation="wave" />
                 </div>
             </div>
         </CardBase>

src/components/Skeleton/SkeletonList.tsx

@@ -1,13 +1,13 @@
-import { Row } from "antd";
+import { Grid } from "@mui/material";
 import React from "react";
 
 const SkeletonList = ({ listItem, repeat }) => {
     return (
-        <Row gutter={40} style={{ marginTop: 32 }}>
+        <Grid container spacing={5} style={{ marginTop: 32 }}>
             {[...Array(repeat)].map((_item, index) => (
                 <React.Fragment key={index}>{listItem}</React.Fragment>
             ))}
-        </Row>
+        </Grid>
     );
 };
 

src/components/Skeleton/SourceSkeleton.tsx

@@ -1,28 +1,31 @@
-import { Row, Col, Skeleton } from "antd";
+import { Grid, Skeleton } from "@mui/material";
 import React from "react";
 import styled from "styled-components";
 
-const SkeletonCol = styled(Col)`
-    .ant-skeleton-element {
-        width: 100%;
-        border-radius: "10px";
-    }
-`;
+const SkeletonGrid = styled(Grid)(() => ({
+    '& .MuiSkeleton-root': {
+        width: "100%",
+        borderRadius: "10px",
+    },
+}));
 
 const SourceSkeleton = () => {
     return (
-        <Row style={{ marginTop: 14, width: "100%" }}>
-            <SkeletonCol span={24}>
-                <Skeleton.Image
+        <Grid container style={{ marginTop: 14, width: "100%" }}>
+            <SkeletonGrid xs={12}>
+                <Skeleton
+                    variant="rectangular"
                     style={{
                         width: "100%",
                         height: "156px",
                         borderRadius: "10px 10px 0 0 ",
                     }}
                 />
-                <Skeleton active paragraph={{ rows: 2 }} />
-            </SkeletonCol>
-        </Row>
+                <Skeleton variant="text" width="30%" animation="wave" />
+                <Skeleton variant="text" width="100%" animation="wave" />
+                <Skeleton variant="text" width="60%" animation="wave" />
+            </SkeletonGrid>
+        </Grid>
     );
 };