adjust spinner size to a smaller and set vertical alignment(to bottom).

apps/app/src/components/LoadingSpinnerPulse.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import styles from './LoadingSpinnerPulse.module.scss';
 
 export const LoadingSpinnerPulse = () => (
-  <div className={`${styles['lds-default']}`}>
+  <div className={`align-bottom ms-1 me-1 ${styles['lds-default']}`}>
     <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
   </div>
 );

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

@@ -1,88 +1,90 @@
+// refs: https://loading.io/css/
+// The sample size is too large, so adjust this size to a smaller.
 .lds-default {
   position: relative;
   display: inline-block;
-  width: 80px;
-  height: 80px;
+  width: 1.5em;
+  height: 1.5em;
 }
 
 .lds-default div {
   position: absolute;
-  width: 6px;
-  height: 6px;
-  background: #fff;
+  width: 8.5%;
+  height: 8.5%;
+  background: currentColor;
   border-radius: 50%;
   animation: lds-default 1.2s linear infinite;
 }
 
 .lds-default div:nth-child(1) {
-  top: 37px;
-  left: 66px;
+  top: 46.25%;
+  left: 82.5%;
   animation-delay: 0s;
 }
 
 .lds-default div:nth-child(2) {
-  top: 22px;
-  left: 62px;
+  top: 27.5%;
+  left: 77.5%;
   animation-delay: -0.1s;
 }
 
 .lds-default div:nth-child(3) {
-  top: 11px;
-  left: 52px;
+  top: 13.75%;
+  left: 65%;
   animation-delay: -0.2s;
 }
 
 .lds-default div:nth-child(4) {
-  top: 7px;
-  left: 37px;
+  top: 8.75%;
+  left: 46.25%;
   animation-delay: -0.3s;
 }
 
 .lds-default div:nth-child(5) {
-  top: 11px;
-  left: 22px;
+  top: 13.75%;
+  left: 27.5%;
   animation-delay: -0.4s;
 }
 
 .lds-default div:nth-child(6) {
-  top: 22px;
-  left: 11px;
+  top: 27.5%;
+  left: 13.25%;
   animation-delay: -0.5s;
 }
 
 .lds-default div:nth-child(7) {
-  top: 37px;
-  left: 7px;
+  top: 46.25%;
+  left: 8.75%;
   animation-delay: -0.6s;
 }
 
 .lds-default div:nth-child(8) {
-  top: 52px;
-  left: 11px;
+  top: 65%;
+  left: 13.75%;
   animation-delay: -0.7s;
 }
 
 .lds-default div:nth-child(9) {
-  top: 62px;
-  left: 22px;
+  top: 77.5%;
+  left: 27.5%;
   animation-delay: -0.8s;
 }
 
 .lds-default div:nth-child(10) {
-  top: 66px;
-  left: 37px;
+  top: 82.5%;
+  left: 46.25%;
   animation-delay: -0.9s;
 }
 
 .lds-default div:nth-child(11) {
-  top: 62px;
-  left: 52px;
+  top: 77.5%;
+  left: 65%;
   animation-delay: -1s;
 }
 
 .lds-default div:nth-child(12) {
-  top: 52px;
-  left: 62px;
+  top: 65%;
+  left: 77.5%;
   animation-delay: -1.1s;
 }
 @keyframes lds-default {