add loader

src/App.jsx

@@ -19,8 +19,11 @@ import Onboarding4 from "./pages/Onboarding4";
 import SharedData from "./pages/SharedData";
 import ResetPassword from "./pages/ResetPassword";
 import SignIn from "./pages/SignIn";
+import {LoadingOverlay} from './components/LoadingOverlay';
+import {store} from './store/store';
+import {observer} from 'mobx-react-lite';
 
-function App() {
+const App = observer(() => {
 
   const location = useLocation();
   useEffect(()=> {
@@ -35,6 +38,7 @@ function App() {
 
   return (
     <>
+      { store.loading && <LoadingOverlay /> }
       <Routes>
         <Route exact path="/" element={<Onboarding1 />} />
         <Route path="/digitalId/profile-id" element={<ProfileId />} />
@@ -50,6 +54,6 @@ function App() {
       </Routes>
     </>
   );
-}
+})
 
 export default App;

src/components/LoadingOverlay.jsx

@@ -0,0 +1,15 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import {ThreeCircles} from 'react-loader-spinner';
+
+export const LoadingOverlay = () => ReactDOM.createPortal((
+  <div className='absolute left-0 top-0 h-screen w-screen z-50 loading-overlay'>
+    <ThreeCircles
+      height="100"
+      width="100"
+      color="#6366f1"
+      visible={true}
+      ariaLabel="three-circles-rotating"
+    />
+  </div>
+), document.body)

src/css/additional-styles/theme.scss

@@ -9,3 +9,10 @@
         @apply ring-0;
     }
 }
+
+.loading-overlay {
+    background-color: rgba(0, 0, 0, 0.25);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/shared/fetchWrapper.js

@@ -8,14 +8,19 @@ function prepareUrl(url) {
 
 function handleRequest(method, url, headers, attempts, token, body) {
   return new Promise((resolve, reject) => {
+    store.loading = true;
     (function internalRequest() {
       return request(method, url, headers, token, body)
         .then(resolve)
         .catch(err => --attempts > 0 ? internalRequest() : reject(err))
     })()
   })
-    .then((res) => res.json())
+    .then((res) => {
+      store.loading = false;
+      return res.json();
+    })
     .catch((err) => {
+      store.loading = false;
       console.log(err)
       return {}
     })

src/store/store.js

@@ -30,6 +30,8 @@ class Store {
 
   _accountInfo = {};
 
+  _loading = false;
+
   constructor() {
     makeAutoObservable(this, {});
 
@@ -289,6 +291,14 @@ class Store {
       [item.label]: item.value
     }), {})
   }
+
+  get loading() {
+    return this._loading;
+  }
+
+  set loading(value) {
+    this._loading = value;
+  }
 }
 
 export const store = new Store();