From cee6e8b42cb03306862245827a1342de4f4716c0 Mon Sep 17 00:00:00 2001
From: xdaruis <rozdaruis@gmail.com>
Date: Fri, 19 Jul 2024 19:27:18 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20loader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.js               |  2 ++
 frontend/src/App.test.js          |  9 ---------
 frontend/src/components/Loader.js | 22 ++++++++++++++++++++++
 frontend/src/setupTests.js        |  5 -----
 4 files changed, 24 insertions(+), 14 deletions(-)
 delete mode 100644 frontend/src/App.test.js
 create mode 100644 frontend/src/components/Loader.js
 delete mode 100644 frontend/src/setupTests.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index fbff628..9c5f4d0 100644
--- a/frontend/src/App.js
+++ b/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 />} />
diff --git a/frontend/src/App.test.js b/frontend/src/App.test.js
deleted file mode 100644
index 6fdff5d..0000000
--- a/frontend/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import App from './App';
-
-test('renders welcome on homepage', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Welcome!/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/frontend/src/components/Loader.js b/frontend/src/components/Loader.js
new file mode 100644
index 0000000..01897da
--- /dev/null
+++ b/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;
diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/frontend/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';