client: add closed debate loading card

Casuals4Fun · May 12, 2024 · cbc9120 · cbc9120
1 parent 745267b
commit cbc9120
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 43 deletions.
diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css
@@ -1,4 +1,5 @@
-#closed-card {
+#closed-card,
+#closed-card-loading {
     min-height: 270px;
     background-color: var(--card_background);
     border-radius: 20px;
@@ -8,18 +9,22 @@
 }
 
 #closed-card .left,
-#closed-card .right {
+#closed-card-loading .left,
+#closed-card .right,
+#closed-card-loading .right {
     padding: 20px 15px;
 }
 
-#closed-card .left {
+#closed-card .left,
+#closed-card-loading .left {
     flex: 1.2;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
-#closed-card .right {
+#closed-card .right,
+#closed-card-loading .right {
     padding-top: 30px;
     padding-bottom: 30px;
     flex: 0.8;
@@ -29,7 +34,8 @@
     overflow: hidden;
 }
 
-#closed-card .divider {
+#closed-card .divider,
+#closed-card-loading .divider {
     margin: 15px 0;
     width: 2px;
     background: linear-gradient(transparent, var(--card_divider), var(--card_divider), transparent);
@@ -45,6 +51,25 @@
     cursor: pointer;
 }
 
+#closed-card-loading .left .topic .loading-skeleton {
+    width: 300px;
+    height: 25px;
+    border-radius: 30px;
+}
+
+#closed-card-loading .left .description {
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+#closed-card-loading .left .description .loading-skeleton {
+    width: 100%;
+    height: 17px;
+    border-radius: 30px;
+}
+
 #closed-card .left p {
     overflow: hidden;
     display: -webkit-box;
@@ -65,7 +90,15 @@
     cursor: pointer;
 }
 
-#closed-card .right .user-info {
+#closed-card-loading .left .view .loading-skeleton {
+    margin-top: 10px;
+    width: 35px;
+    height: 15px;
+    border-radius: 30px;
+}
+
+#closed-card .right .user-info,
+#closed-card-loading .right .user-info {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -79,11 +112,22 @@
     gap: 5px;
 }
 
+#closed-card-loading .right .user-info .debater {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
 #closed-card .right .user-info .debate-by {
     align-items: end;
     text-align: end;
 }
 
+#closed-card-loading .right .user-info .debater:last-child {
+    align-items: end;
+}
+
 #closed-card .right .user-info .debate-from img,
 #closed-card .right .user-info .debate-by img {
     width: 60px;
@@ -94,6 +138,12 @@
     cursor: pointer;
 }
 
+#closed-card-loading .right .user-info .debater .loading-skeleton:nth-child(1) {
+    width: 60px;
+    height: 60px;
+    border-radius: 10px;
+}
+
 #closed-card .right .user-info .debate-from p,
 #closed-card .right .user-info .debate-by p {
     max-width: 100%;
@@ -107,23 +157,57 @@
     cursor: pointer;
 }
 
+#closed-card-loading .right .user-info .debater .loading-skeleton:nth-child(2) {
+    width: 80px;
+    height: 18px;
+    border-radius: 10px;
+}
+
 #closed-card .right .user-info .debate-from p:last-child,
 #closed-card .right .user-info .debate-by p:last-child {
     margin-top: -5px;
     font-size: 14px;
     font-weight: unset;
 }
 
+#closed-card-loading .right .user-info .debater .loading-skeleton:nth-child(3) {
+    width: 60px;
+    height: 15px;
+    border-radius: 10px;
+}
+
 #closed-card .debate-bar__container {
     padding-top: 15px;
 }
 
-#closed-card .right .debate-info {
+#closed-card-loading .right .debate-bar {
+    margin-top: 15px;
+}
+
+#closed-card-loading .right .debate-bar .loading-skeleton {
+    width: 100%;
+    height: 30px;
+}
+
+#closed-card .right .debate-info,
+#closed-card-loading .right .debate-info {
     padding-top: 20px;
     display: flex;
     justify-content: space-between;
 }
 
+#closed-card-loading .right .debate-info .loading-skeleton:first-child {
+    width: 62px;
+    height: 18px;
+    border-radius: 30px;
+}
+
+#closed-card-loading .right .debate-info .loading-skeleton:last-child {
+    width: 72px;
+    height: 18px;
+    border-radius: 30px;
+}
+
 #closed-card .right .debate-info p {
     font-size: 14px;
 }
@@ -133,19 +217,24 @@
 }
 
 @media screen and (max-width: 1536px) {
-    #closed-card {
+
+    #closed-card,
+    #closed-card-loading {
         flex-direction: column;
     }
 
-    #closed-card .divider {
+    #closed-card .divider,
+    #closed-card-loading .divider {
         display: none;
     }
 
-    #closed-card .left {
+    #closed-card .left,
+    #closed-card-loading .left {
         padding-bottom: 0;
     }
 
-    #closed-card .right {
+    #closed-card .right,
+    #closed-card-loading .right {
         padding-top: 10px;
         padding-bottom: 20px;
     }
@@ -158,17 +247,30 @@
         font-size: 15px;
     }
 
-    #closed-card .left a {
+    #closed-card-loading .left .description .loading-skeleton {
+        height: 16px;
+    }
+
+    #closed-card .left a,
+    #closed-card-loading .left .view .loading-skeleton {
         display: none;
     }
 
     #closed-card .debate-bar__container {
         padding-top: 10px;
     }
 
+    #closed-card-loading .right .debate-bar {
+        margin-top: 10px;
+    }
+
     #closed-card .right .debate-info {
         padding-top: 15px;
     }
+
+    #closed-card-loading .right .debate-info {
+        padding-top: 15px;
+    }
 }
 
 @media screen and (max-width: 767px) {
@@ -178,12 +280,17 @@
 }
 
 @media screen and (max-width: 480px) {
-    #closed-card {
+    #closed-card,
+    #closed-card-loading {
         border-width: 1px;
     }
 
     #closed-card .left h2 {
         max-width: 100%;
         font-size: 18px;
     }
+
+    #closed-card-loading .left .topic .loading-skeleton {
+        height: 23px;
+    }
 }
diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -3,6 +3,7 @@ import { useNavigate, Link } from "react-router-dom"
 import DebateBar from "./debate-bar"
 import { MdModeComment } from "react-icons/md"
 import useFormatNumber from "../../hooks/useFormatNumber"
+import LoadingSkeleton from "../loading/skeleton"
 
 const ClosedDebateCard = () => {
     const navigate = useNavigate();
@@ -49,4 +50,48 @@ const ClosedDebateCard = () => {
     )
 }
 
-export default ClosedDebateCard
+const ClosedDebateLoadingCard = () => {
+    return (
+        <div id='closed-card-loading'>
+            <div className='left'>
+                <div className='topic'>
+                    <LoadingSkeleton />
+                </div>
+                <div className='description'>
+                    <LoadingSkeleton />
+                    <LoadingSkeleton />
+                    <LoadingSkeleton />
+                    <LoadingSkeleton />
+                    <LoadingSkeleton />
+                </div>
+                <div className='view'>
+                    <LoadingSkeleton />
+                </div>
+            </div>
+            <div className='divider' />
+            <div className='right'>
+                <div className='user-info'>
+                    <div className='debater'>
+                        <LoadingSkeleton />
+                        <LoadingSkeleton />
+                        <LoadingSkeleton />
+                    </div>
+                    <div className='debater'>
+                        <LoadingSkeleton />
+                        <LoadingSkeleton />
+                        <LoadingSkeleton />
+                    </div>
+                </div>
+                <div className='debate-bar'>
+                    <LoadingSkeleton />
+                </div>
+                <div className='debate-info'>
+                    <LoadingSkeleton />
+                    <LoadingSkeleton />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export { ClosedDebateCard, ClosedDebateLoadingCard }
diff --git a/client/src/components/sidebar/explore.css b/client/src/components/sidebar/explore.css
@@ -52,20 +52,20 @@
     color: var(--body_background);
 }
 
-#explore ul {
+#explore .explore-btns {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }
 
-#explore ul li {
+#explore .explore-btns a {
     padding: 7.5px 20px;
-    background-color: var(--body_background);
+    background-color: var(--card_background);
     border: 1px solid var(--explore_input_bg);
     border-radius: 20px;
 }
 
-#explore ul li:hover {
+#explore .explore-btns a:hover {
     background-color: var(--explore_input_bg);
     transition: background-color 0.2s ease-in-out;
 }
diff --git a/client/src/components/sidebar/explore.tsx b/client/src/components/sidebar/explore.tsx
@@ -58,15 +58,13 @@ const Explore: React.FC<ExploreProps> = ({ term }) => {
                 </div>
             </form>
             {!term && (
-                <ul>
+                <div className='explore-btns'>
                     {categoriesData.map((item, index) => (
-                        <li key={index}>
-                            <Link to={`/search?category=${item}`}>
-                                {item}
-                            </Link>
-                        </li>
+                        <Link to={`/search?category=${item}`} key={index}>
+                            {item}
+                        </Link>
                     ))}
-                </ul>
+                </div>
             )}
         </div>
     )

diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx
@@ -1,5 +1,5 @@
 import "./style.css"
-import ClosedDebateCard from "../../components/card/closed-debate-card"
+import { ClosedDebateCard } from "../../components/card/closed-debate-card"
 import OpenDebateCard from "../../components/card/open-debate-card"
 
 export default function HomePage() {