src/components/LoadingSpinner/index.tsx

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

src/components/LoadingSpinner/style.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/colors.scss';
+
 .loadingSpinnerOverlay {
   position: fixed;
   top: 0;
@@ -18,15 +20,21 @@
   }
 
   .loadingSpinner {
-    border: 4px solid #f3f3f3;
+    background: url('/favicon.png') no-repeat center / cover;
-    border-top: 4px solid #3498db;
-    border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
   }
 }
 
+.loadingSpinnerDesc {
+  color: white;
+  margin-top: 13px;
+
+  font-size: 16px;
+  font-weight: 400;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);