implement loader ui

src/Components/Loader.jsx

@@ -1,5 +1,4 @@
 export default (props) => {
-
     return<div className="overlay">
         <div className="lds-dual-ring"></div>
         </div>

src/routes/root.jsx

@@ -1,14 +1,15 @@
-import { Outlet, Link } from "react-router-dom"
+import { Outlet, Link, useNavigation } from "react-router-dom"
 import { getStories, getPublications, getSubmissions } from "../APIcalls.mjs"
-
+import Loader from "../Components/Loader"
 
 
 
 export function Root() {
-
+  const navigation = useNavigation()
     return(
         <>
         <div id="container">
+          {navigation==="loading"?<Loader/>:""}
         <div id="sidebar">
           <ul>
             <li>
@@ -24,9 +25,10 @@ export function Root() {
             </li>
           </ul>
         </div>
-        
+       
         <div id="outlet">
             <Outlet/>
+       
         </div>
         </div>
         

src/styles/Loader.css

@@ -0,0 +1,36 @@
+.lds-dual-ring {
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    margin:auto;
+  }
+  .lds-dual-ring:after {
+    content: " ";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-dual-ring 1.2s linear infinite;
+  }
+  @keyframes lds-dual-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .overlay{
+    display:flex;
+    justify-content: center;
+    align-content: center;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    backdrop-filter: blur(10px);
+  }