Merge pull request #365 from starknet-id/ayush/refresh-button-fix

feat: add loading state on achievements page

app/achievements/page.tsx

@@ -21,6 +21,7 @@ export default function Page() {
   const [userAchievements, setUserAchievements] = useState<
     AchievementsDocument[]
   >([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     // If a call was made with an address in the first second, the call with 0 address should be cancelled
@@ -128,8 +129,9 @@ export default function Page() {
           }
         }
       );
-
+      setLoading(true);
       await Promise.all(promises);
+      setLoading(false);
     };
     if (userAchievements.length === 0 || !address) return;
     checkAchievements();
@@ -158,7 +160,7 @@ export default function Page() {
                 Complete achievements and grow your Starknet on-chain reputation
               </p>
             </div>
-            {userAchievements.length > 0 ? (
+            {!loading && userAchievements.length > 0 ? (
               userAchievements.map(
                 (achievementCategory: AchievementsDocument, index: number) => {
                   return (

components/skeletons/achievementSkeleton.tsx

@@ -13,7 +13,43 @@ const AchievementSkeleton: FunctionComponent = () => {
           sx={{
             bgcolor: "grey.900",
             borderRadius: "30px",
-            margin: "40px auto",
+            margin: "10px auto 0",
+          }}
+        />
+      </div>
+      <div className={styles.achievementSkeleton}>
+        <Skeleton
+          variant="rounded"
+          className={styles.achievementLoading}
+          height={200}
+          sx={{
+            bgcolor: "grey.900",
+            borderRadius: "30px",
+            margin: "10px auto 0",
+          }}
+        />
+      </div>
+      <div className={styles.achievementSkeleton}>
+        <Skeleton
+          variant="rounded"
+          className={styles.achievementLoading}
+          height={200}
+          sx={{
+            bgcolor: "grey.900",
+            borderRadius: "30px",
+            margin: "10px auto 0",
+          }}
+        />
+      </div>
+      <div className={styles.achievementSkeleton}>
+        <Skeleton
+          variant="rounded"
+          className={styles.achievementLoading}
+          height={200}
+          sx={{
+            bgcolor: "grey.900",
+            borderRadius: "30px",
+            margin: "10px auto 0",
           }}
         />
       </div>

styles/achievements.module.css

@@ -43,14 +43,14 @@
 
 .cardWrapper {
   display: flex;
-  margin: 0 auto;
+  justify-content: center;
 }
 
 .cards {
-  min-width: min(1500px, calc(100% - 32px));
   text-align: left;
   margin-top: 42px;
   width: 100%;
+  max-width: 1330px;
 }
 
 .card {
@@ -310,18 +310,15 @@
     align-items: center;
     gap: 20px;
   }
-  
+
   .subtitle {
     margin-left: 40px;
     margin-right: 40px;
     text-align: center;
   }
 }
 
-.skeleton {
-  min-width: min(1500px, calc(100vw - 4rem));
-}
 
 .container:has(.skeleton) {
   padding: 0 30px;
-}
+}