From 6a3ff2a9b9cb193b2ef8b3e4fdb027d0320c6116 Mon Sep 17 00:00:00 2001
From: Andrzej Stepien <andrzejjamesstepien@gmail.com>
Date: Mon, 11 Sep 2023 11:31:21 +0200
Subject: [PATCH] implement loader ui

---
 src/Components/Loader.jsx |  1 -
 src/routes/root.jsx       | 10 ++++++----
 src/styles/Loader.css     | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 src/styles/Loader.css

diff --git a/src/Components/Loader.jsx b/src/Components/Loader.jsx
index 5547d53..38728fd 100644
--- a/src/Components/Loader.jsx
+++ b/src/Components/Loader.jsx
@@ -1,5 +1,4 @@
 export default (props) => {
-
     return<div className="overlay">
         <div className="lds-dual-ring"></div>
         </div>
diff --git a/src/routes/root.jsx b/src/routes/root.jsx
index 61c99e7..6e314f6 100644
--- a/src/routes/root.jsx
+++ b/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>
         
diff --git a/src/styles/Loader.css b/src/styles/Loader.css
new file mode 100644
index 0000000..3bac808
--- /dev/null
+++ b/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);
+  }
\ No newline at end of file