Merge branch 'working' into dev-channel

Magic-Fishes · May 12, 2024 · cebd943 · cebd943
2 parents 9afda94 + 3a3a5db
commit cebd943
Showing 1 changed file with 55 additions and 3 deletions.
diff --git a/src/components/app/Dashboard/LastGrades.jsx b/src/components/app/Dashboard/LastGrades.jsx
@@ -1,4 +1,4 @@
-import { useContext } from "react"
+import { useRef, useContext } from "react"
 import { AppContext } from "../../../App"
 import Grade from "../Grades/Grade"
 import { Link, useNavigate } from "react-router-dom"
@@ -14,12 +14,15 @@ import {
 
 import "./LastGrades.css"
 import { formatDateRelative } from "../../../utils/date";
+import ContentLoader from "react-content-loader"
 
 export default function LastGrades({ activeAccount, className = "", ...props }) {
     const navigate = useNavigate();
+    const contentLoadersRandomValues = useRef({ subjectNameWidth: Array.from({ length: 3 }, (_, i) => Math.floor(Math.random() * 75) + 75), badgesNumber: Array.from({ length: 3 }, (_, i) => Math.floor(Math.random() * 3) + 1), datesWidth: Array.from({ length: 3 }, (_, i) => Math.floor(Math.random() * 25) + 85) })
 
-    const { useUserData } = useContext(AppContext)
+    const { actualDisplayTheme, useUserData, useUserSettings } = useContext(AppContext)
     const lastGrades = useUserData().get("lastGrades");
+    const settings = useUserSettings();
 
     return (<Window className={`last-grades ${className}`}>
         <WindowHeader onClick={() => navigate("../grades")}>
@@ -43,7 +46,56 @@ export default function LastGrades({ activeAccount, className = "", ...props })
                             <span className="last-grade-date">{formatDateRelative(el.date, window.matchMedia("(max-width: 1850px)").matches)}</span>
                         </Link>
                     </li>)
-                    : <p>Chargement en cours...</p>
+                    : Array.from({ length: 3 }, (_, i) => <li key={i} className="last-grade-container">
+                        <div className="last-grade-wrapper">
+                            <ContentLoader
+                                animate={settings.get("displayMode") === "quality"}
+                                speed={1}
+                                backgroundColor={'#4b48d9'}
+                                foregroundColor={'#6354ff'}
+                                className="last-grade-value"
+                                height={32}
+                                style={{ padding: 0 }}
+                            >
+                                <rect x="0" y="0" rx="10" ry="10" width="100%" height="100%" />
+                            </ContentLoader>
+                            <ContentLoader
+                                animate={settings.get("displayMode") === "quality"}
+                                speed={1}
+                                backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
+                                foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
+                                style={{ width: contentLoadersRandomValues.current.subjectNameWidth[i] + "px", height: "25px" }}
+                                className="last-grade-name"
+                            >
+                                <rect x="0" y="0" rx="10" ry="10" style={{ width: "100%", height: "100%" }} />
+                            </ContentLoader>
+                            <span className="badges-container">
+                                {Array.from({ length: contentLoadersRandomValues.current.badgesNumber[i] }, (_, i) => <ContentLoader
+                                    animate={settings.get("displayMode") === "quality"}
+                                    key={i}
+                                    speed={1}
+                                    backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
+                                    foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
+                                    style={{ width: "20px", height: "20px" }}
+                                    className="last-grade-name"
+                                >
+                                    <rect x="0" y="0" rx="10" ry="10" style={{ width: "100%", height: "100%" }} />
+                                </ContentLoader>)}
+                            </span>
+                            <span className="last-grade-date">
+                                <ContentLoader
+                                    animate={settings.get("displayMode") === "quality"}
+                                    speed={1}
+                                    backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
+                                    foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
+                                    style={{ width: contentLoadersRandomValues.current.datesWidth[i] + "px", height: "25px" }}
+                                    className="last-grade-name"
+                                >
+                                    <rect x="0" y="0" rx="10" ry="10" style={{ width: "100%", height: "100%" }} />
+                                </ContentLoader>
+                            </span>
+                        </div>
+                    </li>)
                 }
             </ol>
         </WindowContent>