fix the position of the loading

Author: pablo-marrero

src/Components/Loader/Loader.css

@@ -1,3 +1,11 @@
+.container-loader{
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .lds-spinner {
     color: official;
     display: inline-block;

src/Components/Loader/Loader.jsx

@@ -3,6 +3,7 @@ import "./Loader.css"
 
 export const Loader = () => {
   return (
+    <div className="container-loader">
     <div className="lds-spinner">
         <div></div>
         <div></div>
@@ -14,5 +15,6 @@ export const Loader = () => {
         <div></div>
         <div></div>
     </div> 
+    </div>
  )
 }    

src/Components/Loguin/ProtectedRoute.js

@@ -1,9 +1,10 @@
 import { Navigate } from "react-router-dom"
 import { useAuth } from "../../Context/AuthContext"
+import { Loader } from "../Loader/Loader.jsx"
 
 export function ProotectedRoute({children}){
     const { user, loading } = useAuth()
-    if(loading) return <h1>Loading</h1>
+    if(loading) return <Loader/>
 
     if(!user) return <Navigate to="/login"/>