change loading icon from material symbols and icons to loading.io icon

apps/app/src/components/LoadingSpinner.jsx

@@ -3,5 +3,7 @@ import React from 'react';
 import styles from './LoadingSpinner.module.scss';
 
 export const LoadingSpinner = () => (
-  <span className={`material-symbols-outlined pb-0 ${styles.spinner}`}>progress_activity</span>
+  // <span className={`material-symbols-outlined pb-0 ${styles.spinner}`}>progress_activity</span>
+  /** refs: https://loading.io/css/ */
+  <div className={`${styles['lds-dual-ring']}`}></div>
 );

apps/app/src/components/LoadingSpinner.module.scss

@@ -1,10 +1,25 @@
-.spinner {
-  animation: animation-rotate 750ms infinite linear;
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
 }
 
-@keyframes animation-rotate {
+.lds-dual-ring:after {
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  content: ' ';
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  border-radius: 50%;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
   100% {
     transform: rotate(360deg);
-    transform: rotate(360deg);
   }
 }