add loading

wassb92 · Aug 1, 2023 · 90c5fb9 · 90c5fb9
1 parent 37a3bde
commit 90c5fb9
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/client/src/components/Loading.jsx b/client/src/components/Loading.jsx
@@ -0,0 +1,33 @@
+const Loading = () => {
+  return (
+    <div className="flex bg-gradient-to-b from-main via-secondary to-main rounded-xl p-2 text-white">
+      <button type="button" disabled>
+        <svg
+          className="animate-spin h-8 w-8 mr-3"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 4335 4335"
+          width="100"
+          height="100"
+        >
+          <path
+            fill="white"
+            d="M3346 1077c41,0 75,34 75,75 0,41 -34,75 -75,75 -41,0 -75,-34 -75,-75 0,-41 34,-75 75,-75zm-1198 -824c193,0 349,156 349,349 0,193 -156,349 -349,349 -193,0 -349,-156 -349,-349 0,-193 156,-349 349,-349zm-1116 546c151,0 274,123 274,274 0,151 -123,274 -274,274 -151,0 -274,-123 -274,-274 0,-151 123,-274 274,-274zm-500 1189c134,0 243,109 243,243 0,134 -109,243 -243,243 -134,0 -243,-109 -243,-243 0,-134 109,-243 243,-243zm500 1223c121,0 218,98 218,218 0,121 -98,218 -218,218 -121,0 -218,-98 -218,-218 0,-121 98,-218 218,-218zm1116 434c110,0 200,89 200,200 0,110 -89,200 -200,200 -110,0 -200,-89 -200,-200 0,-110 89,-200 200,-200zm1145 -434c81,0 147,66 147,147 0,81 -66,147 -147,147 -81,0 -147,-66 -147,-147 0,-81 66,-147 147,-147zm459 -1098c65,0 119,53 119,119 0,65 -53,119 -119,119 -65,0 -119,-53 -119,-119 0,-65 53,-119 119,-119z"
+          />
+        </svg>
+      </button>
+      <span className="mt-1">Chargement...</span>
+    </div>
+  );
+};
+
+const LoadingIcon = ({ loadingIcon }) => {
+  if (loadingIcon)
+    return (
+      <div className="absolute justify-center ml-auto mr-auto">
+        <Loading />
+      </div>
+    );
+  return null;
+};
+
+export { Loading, LoadingIcon };
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
@@ -5,6 +5,7 @@ import { AutoComplete, Input } from "components/Input";
 import { DisplayError } from "components/DisplayNotice";
 import { Button } from "components/Button";
 import { Checkbox, FormGroup, FormControlLabel } from "@mui/material";
+import { LoadingIcon } from "components/Loading";
 
 const Login = () => {
   const [user, setUser] = useState({
@@ -17,10 +18,12 @@ const Login = () => {
   const [isFirstLogin, setIsFirstLogin] = useState(false);
   const [options, setOptions] = useState([]);
   const [favoriteGenre, setFavoriteGenre] = useState("");
+  const [loadingIcon, setLoadingIcon] = useState(false);
 
   const navigate = useNavigate();
 
   const loginHandler = async (e) => {
+    setLoadingIcon(true);
     e.preventDefault();
 
     const config = {
@@ -47,6 +50,7 @@ const Login = () => {
     } catch (error) {
       const isFirstAuth = error?.response?.data?.firstAuth;
       setError(!isFirstAuth && error?.response?.data?.error);
+      setLoadingIcon(false);
       setIsFirstLogin(isFirstAuth);
       if (isFirstAuth) {
         console.log(
@@ -77,7 +81,11 @@ const Login = () => {
   return (
     <div className="from-main to-secondary">
       <div className="flex justify-center items-center">
-        <div className="md:px-10 md:pt-10 px-2 pt-2 bg-white rounded-xl drop-shadow-lg space-y-5 pb-8">
+        <div
+          className={`md:px-10 md:pt-10 px-2 pt-2 bg-white rounded-xl drop-shadow-lg space-y-5 pb-8 shadow-2xl ${
+            loadingIcon ? "blur-sm" : "blur-none"
+          }`}
+        >
           <h1 className="text-center md:text-3xl text-xl">Se connecter</h1>
           <div className="flex flex-col space-y-2">
             <Input
@@ -122,10 +130,15 @@ const Login = () => {
             <Button type="submit" children="Connexion" onClick={loginHandler} />
           </div>
         </div>
+        <LoadingIcon loadingIcon={loadingIcon} />
       </div>
       {isFirstLogin && (
         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="px-20 py-6 bg-white rounded-md shadow-xl">
+          <div
+            className={`px-20 py-6 bg-white rounded-md shadow-xl ${
+              loadingIcon ? "blur-sm" : "blur-none"
+            }`}
+          >
             <div className="flex flex-col items-center">
               <div className="font-bold text-main text-6xl">
                 Hop hop hop, il semblerait que tu sois nouveau !
@@ -156,6 +169,7 @@ const Login = () => {
               />
             </div>
           </div>
+          <LoadingIcon loadingIcon={loadingIcon} />
         </div>
       )}
     </div>