Système de chargement

src/App.js

@@ -21,6 +21,8 @@ import RestartPassword from './pages/RestartPassword';
 
 const App = () => {
 
+  <Chargement/>
+
     return (
       <BrowserRouter>
         <Routes>

src/pages/Chargement.js

@@ -1,11 +1,14 @@
-import React, {Component} from 'react';
+import React from 'react';
 import ReactLoading from 'react-loading';
 
+
+
 const Chargement = () => {
 
-    return (
+    return(
         <div className="chargement">
-            <ReactLoading type="bars" color="#a9a9a9"/>
+            <img className="logo" srcSet="./LogoApp.svg"></img>
+            <ReactLoading type="bars" color="#a9a9a9" />
         </div>
     );
 }

src/pages/Connexion.js

@@ -1,9 +1,10 @@
 import axios from 'axios'
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import CryptoJS from 'crypto-js';
 import Admin from './Admin_create.js'
 import Dashboard from './Dashboard.js'
 import Admin_list from './Admin_list.js';
+import Chargement from './Chargement.js';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -58,6 +59,15 @@ function Connexion() {
         });
     }
 
+    const [loader, setLoader] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoader(false);
+        }, 3000)
+    }, [])
+
+
     if (auth === "Succeed") {
         const apiString = '/User/role/' + login;
         api.get(apiString).then((response) => {
@@ -77,7 +87,9 @@ function Connexion() {
             return (<Dashboard />);
     }
     else {
-        return (
+        return loader ?(
+            <Chargement/>
+        ) : (
             <div className="page_connexion">
                 <img className="logo" srcSet="./LogoApp.svg"></img>
                 <form onSubmit={chechAuth} className="formulaire_de_connexion">

src/styles/components/_chargement.scss

@@ -1,6 +1,12 @@
 .chargement {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
+}
+
+.logo{
+    height: 200px;
+    width:200px;
 }