src/components/LoadingSpinner/index.tsx

@@ -23,7 +23,9 @@ export const LoadingSpinner = (props: Props) => {
         <div className={styles.loadingSpinnerOverlay}>
           <div className={styles.loadingSpinnerContainer}>
             <div className={styles.loadingSpinner}></div>
-            {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
+            {desc && (
+              <p className={styles.loadingSpinnerDesc}>{'Loading...'}</p>
+            )}
           </div>
         </div>
       )

src/components/LoadingSpinner/style.module.scss

@@ -2,23 +2,29 @@
 
 .loadingSpinnerOverlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 9999;
+  backdrop-filter: blur(10px);
 }
 
 .loadingSpinnerContainer {
+  width: 100%;
+  max-width: 500px;
+  margin: 25px 20px;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
+  background: $overlay-background-color;
+  box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
+  border-radius: 4px;
+
   &.withHeight {
     min-height: 250px;
   }
@@ -26,14 +32,18 @@
 
 .loadingSpinner {
   background: url('/favicon.png') no-repeat center / cover;
-  width: 40px;
-  height: 40px;
+  margin: 40px 25px;
+  width: 65px;
+  height: 65px;
   animation: spin 1s linear infinite;
 }
 
 .loadingSpinnerDesc {
-  color: white;
-  margin-top: 13px;
+  width: 100%;
+  padding: 15px;
+  border-top: solid 1px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  color: rgba(0, 0, 0, 0.5);
 
   font-size: 16px;
   font-weight: 400;