diff --git a/src/App.jsx b/src/App.jsx
index 9130095..3fe5bae 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,7 @@
import './assets/styles/base.scss';
import { Route, Routes } from 'react-router-dom';
import { Suspense, lazy } from 'react';
-import UploadProgressBar from './components/common/UploadProgressBar';
+import LoadingSpinner from './components/common/LoadingSpinner';
import Header from './components/layout/Header/Header';
const RecipientList = lazy(() => import('./pages/RecipientList/RecipientList'));
@@ -16,7 +16,7 @@ export default function App() {
return (
<>
- }>
+ }>
} />
} />
diff --git a/src/components/common/LoadingSpinner.jsx b/src/components/common/LoadingSpinner.jsx
new file mode 100644
index 0000000..b3d1250
--- /dev/null
+++ b/src/components/common/LoadingSpinner.jsx
@@ -0,0 +1,10 @@
+import styles from './LoadingSpinner.module.scss';
+
+export default function LoadingSpinner() {
+ return (
+
+ );
+}
diff --git a/src/components/common/LoadingSpinner.module.scss b/src/components/common/LoadingSpinner.module.scss
new file mode 100644
index 0000000..2b3f36c
--- /dev/null
+++ b/src/components/common/LoadingSpinner.module.scss
@@ -0,0 +1,37 @@
+@use '../../assets/styles/variables.scss' as *;
+
+.spinnerWrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.spinner {
+ width: 40px;
+ height: 40px;
+ border: 4px solid #eee;
+ border-top: 4px solid $purple-600;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin-bottom: 12px;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.text {
+ color: $purple-600;
+ font-size: 1.1rem;
+ font-weight: 500;
+}