ad skeleton

Author: actions-user

src/pages/Notifications/index.jsx

@@ -6,6 +6,7 @@ import { useNavigate } from "react-router-dom";
 import ModalSm from "../../components/Modal/ModalSm";
 import { getFieldTranslationByNames } from "../../services/Utility";
 import NoNotification from "./NoNotification";
+import { Skeleton } from "../../components/Skeleton";
 
 const Div = styled.div`
   display: flex;
@@ -15,6 +16,7 @@ const Div = styled.div`
   padding-right: 15px;
   height: 100%;
 `;
+
 const Container = styled.div`
   height: 77%;
   h4 {
@@ -28,30 +30,66 @@ const Container = styled.div`
   }
 `;
 
+// اسکلتون برای کارت
+const SkeletonCard = styled.div`
+  padding: 20px;
+  border-radius: 5px;
+  background-color: ${(props) =>
+    props.theme.colors.newColors.otherColors.inputBg};
+
+`;
+
 const Notifications = () => {
   const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true); // اضافه شد
   const { Request, HTTP_METHOD } = useRequest();
 
   useEffect(() => {
-    Request("notifications").then((response) => {
-      setNotifications(response.data.data);
-    });
+    setLoading(true);
+    Request("notifications")
+      .then((response) => {
+        setNotifications(response.data.data || []);
+      })
+      .catch((error) => {
+        console.error("Error fetching notifications:", error);
+        setNotifications([]);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, []);
+
   const handleDelete = () => {
     Request("notifications/read/all", HTTP_METHOD.POST)
       .then(() => {
         setNotifications([]);
       })
       .catch((err) => console.error(err));
   };
+
   return (
     <ModalSm title={"238"}>
       <Container>
-        {/**delete all notif */}
         <h4 onClick={handleDelete}>{getFieldTranslationByNames("866")}</h4>
-
         <Div>
-          {notifications.length === 0 ? (
+          {loading ? (
+            // اسکلتون برای 3 کارت
+            Array.from({ length: 3 }).map((_, index) => (
+              <SkeletonCard key={index}>
+                <div style={{ display: "flex", alignItems: "center", justifyContent:"space-between" ,width:"100%", gap: "12px", marginBottom: "10px" }}>
+                  <div style={{ display: "flex", alignItems: "center" , gap: "12px", }}>
+                    <Skeleton width="60px" height="60px" radius="50%" />
+                  <div>
+                    <Skeleton width="120px" height="20px" radius="4px" style={{ marginBottom: "8px" }} />
+                    <Skeleton width="150px" height="14px" radius="4px" />
+                  </div>
+                  </div>
+                  <Skeleton width="35px" height="35px" radius="50%"  />
+                </div>
+                <Skeleton width="100%" height="30px" radius="4px" />
+              </SkeletonCard>
+            ))
+          ) : notifications.length === 0 ? (
             <NoNotification />
           ) : (
             notifications.map((notif) => (
@@ -61,6 +99,7 @@ const Notifications = () => {
                 key={notif.id}
                 id={notif.id}
                 data={notif}
+                isLoading={false}
               />
             ))
           )}
@@ -70,4 +109,4 @@ const Notifications = () => {
   );
 };
 
-export default Notifications;
+export default Notifications;