Merge pull request #89 from iranpsc/feat/Skeleton

Author: theAwmin

package-lock.json

@@ -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/Button.jsx

@@ -0,0 +1,39 @@
+import styled, { keyframes } from "styled-components";
+import Container from "./Container";
+
+const shimmer = keyframes`
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+`;
+
+const LoadingContainer = styled(Container)`
+  display: flex;
+  gap: 20px;
+  
+`;
+
+const SkeletonCard = styled.div`
+  flex: 1;
+  height: 66px;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+     ${(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;
+`;
+
+const SkeletonGrid = ({ count = 2 }) => {
+  return (
+    <LoadingContainer>
+      {Array.from({ length: count }).map((_, i) => (
+        <SkeletonCard key={i} />
+      ))}
+    </LoadingContainer>
+  );
+};
+
+export default SkeletonGrid;