✨ Add loader

frontend/src/App.js

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 
 import Layout from './components/Layout/index.js';
+import Loader from './components/Loader.js';
 import { loaded, login, logout } from './features/auth.js';
 import Home from './routes/Home.js';
 import Login from './routes/Login.js';
@@ -41,6 +42,7 @@ const App = () => {
 
   return (
     <Router>
+      {isLoading && <Loader />}
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />

frontend/src/components/Loader.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Loader = () => {
+  return (
+    <div
+      className="vh-100 vw-100 position-fixed top-0
+        start-0 d-flex justify-content-center align-items-center
+        bg-dark bg-opacity-50"
+      style={{ zIndex: 9999 }}
+    >
+      <div
+        className="spinner-border text-light"
+        role="status"
+        style={{ width: '3rem', height: '3rem' }}
+      >
+        <span className="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  );
+};
+
+export default Loader;