client: add open debate loading card

Casuals4Fun · May 12, 2024 · 4612fb5 · 4612fb5
1 parent cbc9120
commit 4612fb5
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 29 deletions.
diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
@@ -1,17 +1,23 @@
-#open-card {
+#open-card,
+#open-card-loading {
     min-height: 270px;
     padding: 20px 15px;
     background-color: var(--card_background);
     border-radius: 20px;
     border: 2px solid var(--card_border);
 }
 
-#open-card .debate-header {
+#open-card .debate-header,
+#open-card-loading .debate-header {
     display: flex;
     gap: 20px;
     justify-content: space-between;
 }
 
+#open-card-loading .debate-header {
+    align-items: center;
+}
+
 #open-card .debate-header h2 {
     font-size: 20px;
     font-weight: 600;
@@ -21,6 +27,12 @@
     cursor: pointer;
 }
 
+#open-card-loading .debate-header .loading-skeleton:first-child {
+    width: 400px;
+    height: 25px;
+    border-radius: 30px;
+}
+
 #open-card .debate-header a {
     padding-top: 3px;
     width: fit-content;
@@ -31,6 +43,12 @@
     cursor: pointer;
 }
 
+#open-card-loading .debate-header .loading-skeleton:last-child {
+    width: 52px;
+    height: 20px;
+    border-radius: 30px;
+}
+
 #open-card .debate-body {
     overflow: hidden;
     display: -webkit-box;
@@ -41,20 +59,35 @@
     color: var(--card_color_secondary);
 }
 
+#open-card-loading .debate-body {
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+#open-card-loading .debate-body .loading-skeleton {
+    width: 100%;
+    height: 17px;
+    border-radius: 30px;
+}
+
 #open-card .debate-info {
     display: flex;
     gap: 10px;
     font-size: 15px;
     font-weight: 600;
 }
 
-#open-card .debate-footer {
+#open-card .debate-footer,
+#open-card-loading .debate-footer {
     display: flex;
     align-items: end;
     justify-content: space-between;
 }
 
-#open-card .user-info {
+#open-card .user-info,
+#open-card-loading .user-info {
     width: 70%;
     padding: 10px 0 15px 0;
     display: flex;
@@ -71,6 +104,12 @@
     cursor: pointer;
 }
 
+#open-card-loading .user-info .img .loading-skeleton {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+}
+
 #open-card .user-info .user-detail {
     overflow: hidden;
 }
@@ -89,6 +128,19 @@
     font-weight: 600;
 }
 
+#open-card-loading .user-info .user-detail .loading-skeleton:first-child {
+    width: 100px;
+    height: 18px;
+    border-radius: 30px;
+}
+
+#open-card-loading .user-info .user-detail .loading-skeleton:last-child {
+    margin-top: 5px;
+    width: 75px;
+    height: 15px;
+    border-radius: 30px;
+}
+
 #open-card .user-info p:nth-child(2) {
     font-size: 14px;
 }
@@ -99,29 +151,62 @@
     color: var(--card_color_secondary);
 }
 
+#open-card-loading .debate-footer .debate-info {
+    display: flex;
+    gap: 10px;
+}
+
+#open-card-loading .debate-footer .debate-info .loading-skeleton {
+    width: 65px;
+    height: 20px;
+    border-radius: 30px;
+}
+
+#open-card-loading .debate-footer .created-date .loading-skeleton {
+    width: 75px;
+    height: 18px;
+    border-radius: 30px;
+}
+
 @media screen and (max-width: 1536px) {
-    #open-card {
+
+    #open-card,
+    #open-card-loading {
         min-height: auto;
     }
 
     #open-card .debate-body {
         font-size: 15px;
     }
+
+    #open-card-loading .debate-body .loading-skeleton {
+        height: 16px;
+    }
 }
 
 @media screen and (max-width: 480px) {
-    #open-card {
+
+    #open-card,
+    #open-card-loading {
         border-width: 1px;
     }
 
     #open-card .debate-header {
         gap: 10px;
     }
 
+    #open-card-loading .debate-header .loading-skeleton:first-child {
+        width: 250px;
+    }
+
     #open-card .debate-header h2 {
         font-size: 18px;
     }
 
+    #open-card-loading .debate-header .loading-skeleton:first-child {
+        height: 23px;
+    }
+
     #open-card .debate-header a {
         padding-top: 0;
     }

diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -3,6 +3,7 @@ import { useNavigate, Link } from "react-router-dom"
 import { MdModeComment } from "react-icons/md"
 import { IoCaretUpSharp } from "react-icons/io5"
 import useFormatNumber from "../../hooks/useFormatNumber"
+import LoadingSkeleton from "../loading/skeleton"
 
 const OpenDebateCard = () => {
     const navigate = useNavigate();
@@ -44,4 +45,40 @@ const OpenDebateCard = () => {
     )
 }
 
-export default OpenDebateCard
+const OpenDebateLoadingCard = () => {
+    return (
+        <div id='open-card-loading'>
+            <div className='debate-header'>
+                <LoadingSkeleton />
+                <LoadingSkeleton />
+            </div>
+            <div className='debate-body'>
+                <LoadingSkeleton />
+                <LoadingSkeleton />
+                <LoadingSkeleton />
+                <LoadingSkeleton />
+                <LoadingSkeleton />
+            </div>
+            <div className='user-info'>
+                <div className='img'>
+                    <LoadingSkeleton />
+                </div>
+                <div className='user-detail'>
+                    <LoadingSkeleton />
+                    <LoadingSkeleton />
+                </div>
+            </div>
+            <div className='debate-footer'>
+                <div className='debate-info'>
+                    <LoadingSkeleton />
+                    <LoadingSkeleton />
+                </div>
+                <div className='created-date'>
+                    <LoadingSkeleton />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export { OpenDebateCard, OpenDebateLoadingCard }
diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx
@@ -1,6 +1,6 @@
 import "./style.css"
 import { ClosedDebateCard } from "../../components/card/closed-debate-card"
-import OpenDebateCard from "../../components/card/open-debate-card"
+import { OpenDebateCard } from "../../components/card/open-debate-card"
 
 export default function HomePage() {
   return (

diff --git a/client/src/pages/open-topics/index.tsx b/client/src/pages/open-topics/index.tsx
@@ -1,38 +1,28 @@
 import "./style.css"
-import OpenDebateCard from "../../components/card/open-debate-card"
+import { OpenDebateCard, OpenDebateLoadingCard } from "../../components/card/open-debate-card"
 
 export default function OpenTopicsPage() {
     return (
         <div id='open-topics'>
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
-            <OpenDebateCard />
+            <OpenDebateLoadingCard />
             <OpenDebateCard />
         </div>
     )