fix; improve skeleton achievements

lfglabs-dev · Oct 2, 2023 · 447d1ca · 447d1ca
1 parent def996c
commit 447d1ca
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/components/skeletons/achievementSkeleton.tsx b/components/skeletons/achievementSkeleton.tsx
@@ -1,33 +1,32 @@
 import React, { FunctionComponent } from "react";
-import { Skeleton, useMediaQuery } from "@mui/material";
+import { Skeleton } from "@mui/material";
+import styles from "../../styles/achievements.module.css";
 
 const AchievementSkeleton: FunctionComponent = () => {
-  const isMobile = useMediaQuery("(max-width:768px)");
   return (
     <>
-      <Skeleton
-        variant="rounded"
-        width={1000}
-        height={isMobile ? 400 : 245}
-        sx={{
-          bgcolor: "grey.900",
-          marginBottom: "40px",
-          borderRadius: "30px",
-          maxWidth: `${isMobile ? "100%" : "min(1500px, calc(100% - 32px))"}`,
-          margin: "0 auto 40px",
-        }}
-      />
-      <Skeleton
-        variant="rounded"
-        width={1000}
-        height={isMobile ? 400 : 245}
-        sx={{
-          bgcolor: "grey.900",
-          borderRadius: "30px",
-          maxWidth: `${isMobile ? "100%" : "min(1500px, calc(100% - 32px))"}`,
-          margin: "0 auto",
-        }}
-      />
+      <div className={styles.achievementSkeleton}>
+        <Skeleton
+          variant="rounded"
+          className={styles.achievementLoading}
+          sx={{
+            bgcolor: "grey.900",
+            borderRadius: "30px",
+            margin: "40px auto 0",
+          }}
+        />
+      </div>
+      <div className={styles.achievementSkeleton}>
+        <Skeleton
+          variant="rounded"
+          className={styles.achievementLoading}
+          sx={{
+            bgcolor: "grey.900",
+            borderRadius: "30px",
+            margin: "10px auto 0",
+          }}
+        />
+      </div>
     </>
   );
 };

diff --git a/pages/achievements.tsx b/pages/achievements.tsx
@@ -104,10 +104,10 @@ const Achievements: NextPage = () => {
             Complete achievements and grow your Starknet on-chain reputation
           </p>
         </div>
-        <div className={styles.cardWrapper}>
-          <div className={styles.cards}>
-            {userAchievements.length > 0 ? (
-              userAchievements.map(
+        {userAchievements.length > 0 ? (
+          <div className={styles.cardWrapper}>
+            <div className={styles.cards}>
+              {userAchievements.map(
                 (achievementCategory: AchievementsDocument, index: number) => {
                   return (
                     <Achievement
@@ -117,12 +117,12 @@ const Achievements: NextPage = () => {
                     />
                   );
                 }
-              )
-            ) : (
-              <AchievementSkeleton />
-            )}
+              )}
+            </div>
           </div>
-        </div>
+        ) : (
+          <AchievementSkeleton />
+        )}
       </div>
     </div>
   );

diff --git a/styles/achievements.module.css b/styles/achievements.module.css
@@ -236,6 +236,21 @@ background: linear-gradient(
     opacity: 0.8;
 }
 
+.achievementSkeleton {
+    height: 250px;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+}
+
+.achievementLoading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%;
+}
+
 @media (max-width: 768px) {
     .container {
         padding: 0;