fix setting skeleton and loading btn

Author: actions-user

src/components/Button.jsx

@@ -1,19 +1,22 @@
 import styled from "styled-components";
-import loaderGif from "../assets/gif/ajax-loader.gif";
 
 const ButtonElement = styled.button`
   border-radius: 10px;
   white-space: nowrap;
   background-color: ${(props) =>
     props.color
-      ? props.disabled
-        ? `${props.color}80` // Add 50% transparency when disabled
-        : props.color
+      ? props.disabled === "pending"
+        ? props.color  // همان رنگ اصلی، فقط مات میشه
+        : props.disabled
+          ? `${props.color}80`
+          : props.color
       : props.grayTheme
         ? props.theme.colors.newColors.otherColors.garyBtn
         : props.disabled === "pending"
-          ? "#3B3B3B"
-          : props.theme.colors.primary};
+          ? props.theme.colors.primary  // رنگ اصلی، فقط مات میشه
+          : props.disabled
+            ? `${props.theme.colors.primary}80`
+            : props.theme.colors.primary};
   border: none;
   padding: ${(props) => (props.large ? "0 20px" : "10px 22px")};
   width: ${(props) =>
@@ -32,7 +35,7 @@ const ButtonElement = styled.button`
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   color: ${(props) =>
     props.disabled === "pending"
-      ? "#949494"
+      ? props.theme.colors.newColors.primaryText
       : props.grayTheme
         ? props.theme.colors.newColors.otherColors.grayBtnText
         : props.theme.colors.newColors.primaryText};
@@ -41,8 +44,10 @@ const ButtonElement = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: ${(props) => (props.disabled ? "0.5" : "1")};
+  gap: 8px;
+  opacity: ${(props) => (props.disabled === "pending" ? "0.6" : props.disabled ? "0.5" : "1")};
   pointer-events: ${(props) => (props.disabled ? "none" : "auto")};
+  
   @media (max-width: 840px) {
     width: ${(props) => (props.row ? "55px" : props.full && "100%")};
     height: ${(props) => props.row && "35px"};
@@ -52,10 +57,21 @@ const ButtonElement = styled.button`
   @media (min-width: 998px) {
     height: ${(props) => (props.large ? "40px" : "50px")};
   }
-  & img {
-    width: 25px;
-    height: 25px;
-    margin: 0 3px;
+`;
+
+// اسپینر دایره‌ای
+const Spinner = styled.span`
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  border-top: 2px solid white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  display: inline-block;
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }
 `;
 
@@ -91,9 +107,9 @@ const Button = ({
       style={style}
     >
       {label}
-      {disabled === "pending" && <img src={loaderGif} alt="Loading..." />}
+      {disabled === "pending" && <Spinner />}
     </ButtonElement>
   );
 };
 
-export default Button;
+export default Button;

src/components/Common/SkeletonGrid.jsx

@@ -9,18 +9,18 @@ const shimmer = keyframes`
 const LoadingContainer = styled(Container)`
   display: flex;
   gap: 20px;
-  padding: 20px;
+  
 `;
 
 const SkeletonCard = styled.div`
   flex: 1;
-  height: 280px;
-  border-radius: 10px;
+  height: 66px;
+  border-radius: 4px;
   background: linear-gradient(
     90deg,
-    #dcdcdc 25%,
-    #e9e9e9 37%,
-    #dcdcdc 63%
+     ${(props) => props.theme.colors.newColors.shades.bg02},
+    ${(props) => props.theme.colors.newColors.shades.bg002},
+    ${(props) => props.theme.colors.newColors.shades.bg0002}
   );
   background-size: 1000px 100%;
   animation: ${shimmer} 1.2s infinite linear;

src/pages/Report/reports/ErrorReportTab/ErrorReportTab.jsx

@@ -14,6 +14,7 @@ import { useLocation } from "react-router-dom";
 import Container from "../../../../components/Common/Container";
 import ErrorMessage from "../../../../components/ErrorMessage";
 import getModalHeaderFromPrevious from "../../../../services/TitleManager";
+
 const StyledContent = styled.div`
   p {
     margin: 10px 0;
@@ -31,11 +32,11 @@ const ErrorReportTab = () => {
   const location = useLocation();
   const [title, setTitle] = useState("");
   const [subdomain, SetSubdomain] = useState("");
+  const [isSending, setIsSending] = useState(false); // حالت لودینگ دکمه
+
   useEffect(() => {
     const basePath = location.state?.from ?? location.pathname;
-
     const { title, page } = getModalHeaderFromPrevious(basePath);
-
     setTitle(title);
     SetSubdomain(page);
   }, [location]);
@@ -53,13 +54,16 @@ const ErrorReportTab = () => {
     dispatch({ type: "SET_DESCRIPTION", payload: "" });
     dispatch({ type: "SET_FILES", payload: [] });
   };
+
   const sendReport = async () => {
     if (
       state.subject &&
       state.title &&
       state.description &&
       state.files.length > 0
     ) {
+      setIsSending(true); // شروع لودینگ
+
       const formData = {
         title: state.title,
         content: state.description,
@@ -73,6 +77,7 @@ const ErrorReportTab = () => {
 
       if (attachments.length > 5) {
         setError("The attachment must not have more than 5 items.");
+        setIsSending(false);
         return;
       }
 
@@ -95,11 +100,21 @@ const ErrorReportTab = () => {
         }, 3000);
       } catch (error) {
         console.error("❌ Report submission failed:", error);
-
         setError(getFieldTranslationByNames("1387"));
+      } finally {
+        setIsSending(false); // پایان لودینگ
       }
     }
   };
+
+  // بررسی غیرفعال بودن دکمه
+  const isDisabled = !(
+    state.subject &&
+    state.title &&
+    state.description &&
+    state.files.length > 0
+  );
+
   return (
     <Container ref={containerRef}>
       {alert && (
@@ -119,6 +134,7 @@ const ErrorReportTab = () => {
             fit
             label={getFieldTranslationByNames("193")}
             onclick={sendReport}
+            disabled={isDisabled ? true : isSending ? "pending" : false}
           />
         </div>
         <ErrorMessage
@@ -132,4 +148,4 @@ const ErrorReportTab = () => {
   );
 };
 
-export default ErrorReportTab;
+export default ErrorReportTab;

src/pages/Sanad/Tabs/WriteVodTab.jsx

@@ -11,7 +11,6 @@ import {
   getFieldTranslationByNames,
   ToastError,
 } from "../../../services/Utility";
-
 import useRequest from "../../../services/Hooks/useRequest";
 import Container from "../../../components/Common/Container";
 
@@ -20,6 +19,7 @@ const WriteVodTab = () => {
   const { alert, setAlert } = useContext(AlertContext);
   const { Request, HTTP_METHOD } = useRequest();
   const containerRef = useRef(null);
+  const [isSending, setIsSending] = useState(false);
 
   const resetForm = () => {
     dispatch({ type: "SET_SUBJECT", payload: "" });
@@ -36,6 +36,8 @@ const WriteVodTab = () => {
       state.description &&
       state.files.length > 0
     ) {
+      setIsSending(true);
+
       const filesData = new FormData();
 
       filesData.append("title", state.title);
@@ -68,11 +70,11 @@ const WriteVodTab = () => {
             setAlert(false);
           }, 2000);
         })
-
         .catch((error) => {
-
-          ToastError(error.response.data.message);
-          
+          ToastError(error.response?.data?.message || "خطا در ارسال تیکت");
+        })
+        .finally(() => {
+          setIsSending(false);
         });
     }
   };
@@ -90,6 +92,14 @@ const WriteVodTab = () => {
     }
   }, [alert, setAlert]);
 
+  // بررسی غیرفعال بودن دکمه
+  const isDisabled = !(
+    state.subject &&
+    state.title &&
+    state.description &&
+    state.files.length > 0
+  );
+
   return (
     <Container ref={containerRef}>
       <Title title={getFieldTranslationByNames("1314")} right />
@@ -105,7 +115,12 @@ const WriteVodTab = () => {
       <Description />
       <SendFiles files={state.files} onFilesChange={handleFilesChange} />
 
-      <Button fit label={getFieldTranslationByNames("730")} onclick={sendVod} />
+      <Button 
+        fit 
+        label={getFieldTranslationByNames("730")}
+        onclick={sendVod}
+        disabled={isDisabled ? true : isSending ? "pending" : false}
+      />
     </Container>
   );
 };

src/pages/Sanad/Tabs/notes/WriteNote.jsx

@@ -21,6 +21,7 @@ const Container = styled.div`
     width: 50%;
   }
 `;
+
 const Subject = styled.div`
   input {
     background-color: ${(props) =>
@@ -58,14 +59,17 @@ const WriteNote = () => {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [files, setFiles] = useState([]);
+  const [isSending, setIsSending] = useState(false); // حالت لودینگ
 
   const { Request, HTTP_METHOD } = useRequest();
+
   useEffect(() => {
     if (alert) {
       const timer = setTimeout(() => setAlert(false), 2000);
       return () => clearTimeout(timer);
     }
   }, [alert, setAlert]);
+
   const handleSaveNote = () => {
     if (!title.trim() || !description.trim()) {
       setError(getFieldTranslationByNames(1644));
@@ -78,6 +82,7 @@ const WriteNote = () => {
     }
 
     setError("");
+    setIsSending(true); // شروع لودینگ
 
     const formData = new FormData();
     formData.append("title", title);
@@ -93,7 +98,10 @@ const WriteNote = () => {
         setAlert(true);
         resetForm();
       })
-      .catch(() => setError(getFieldTranslationByNames(1645)));
+      .catch(() => setError(getFieldTranslationByNames(1645)))
+      .finally(() => {
+        setIsSending(false); // پایان لودینگ
+      });
   };
 
   const resetForm = () => {
@@ -102,6 +110,9 @@ const WriteNote = () => {
     setFiles([]);
   };
 
+  // بررسی غیرفعال بودن دکمه
+  const isDisabled = !title.trim() || !description.trim() || files.length > 5;
+
   return (
     <Container>
       <Title right title={getFieldTranslationByNames("1354")} />
@@ -121,11 +132,12 @@ const WriteNote = () => {
           fit
           label={getFieldTranslationByNames("629")}
           onclick={handleSaveNote}
+          disabled={isDisabled ? true : isSending ? "pending" : false}
         />
       </div>
       {error && <ErrorMessage>{error}</ErrorMessage>}
     </Container>
   );
 };
 
-export default WriteNote;
+export default WriteNote;

src/pages/Sanad/Tabs/sent/SentList.jsx

@@ -140,14 +140,28 @@ const rows_items = [
 ];
 const SentList = ({ setShowDetails }) => {
   const [rows, setRows] = useState([]);
+  const [loading, setLoading] = useState(true);
   const [searched, setSearched] = useState("");
   const [status, setStatus] = useState({
     pending: false,
     confirmed: false,
     failed: false,
     read: false,
   });
-
+useEffect(() => {
+    setLoading(true);
+    Request("tickets?recieved=1")
+      .then((response) => {
+        setRows(response.data.data || []);
+      })
+      .catch((error) => {
+        console.error("Error fetching tickets:", error);
+        setRows([]);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
   const { Request } = useRequest();
 
   useEffect(() => {
@@ -203,6 +217,7 @@ const SentList = ({ setShowDetails }) => {
         status={status}
         rows={filteredItems}
         mode=""
+        isLoading={loading}
       />
     </Container>
   );