add pulse spinner component

apps/app/src/components/LoadingSpinnerPulse.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import styles from './LoadingSpinnerPulse.module.scss';
+
+export const LoadingSpinnerPulse = () => (
+  <div className={`${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

@@ -0,0 +1,95 @@
+.lds-default {
+  position: relative;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-default div {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: #fff;
+  border-radius: 50%;
+  animation: lds-default 1.2s linear infinite;
+}
+
+.lds-default div:nth-child(1) {
+  top: 37px;
+  left: 66px;
+  animation-delay: 0s;
+}
+
+.lds-default div:nth-child(2) {
+  top: 22px;
+  left: 62px;
+  animation-delay: -0.1s;
+}
+
+.lds-default div:nth-child(3) {
+  top: 11px;
+  left: 52px;
+  animation-delay: -0.2s;
+}
+
+.lds-default div:nth-child(4) {
+  top: 7px;
+  left: 37px;
+  animation-delay: -0.3s;
+}
+
+.lds-default div:nth-child(5) {
+  top: 11px;
+  left: 22px;
+  animation-delay: -0.4s;
+}
+
+.lds-default div:nth-child(6) {
+  top: 22px;
+  left: 11px;
+  animation-delay: -0.5s;
+}
+
+.lds-default div:nth-child(7) {
+  top: 37px;
+  left: 7px;
+  animation-delay: -0.6s;
+}
+
+.lds-default div:nth-child(8) {
+  top: 52px;
+  left: 11px;
+  animation-delay: -0.7s;
+}
+
+.lds-default div:nth-child(9) {
+  top: 62px;
+  left: 22px;
+  animation-delay: -0.8s;
+}
+
+.lds-default div:nth-child(10) {
+  top: 66px;
+  left: 37px;
+  animation-delay: -0.9s;
+}
+
+.lds-default div:nth-child(11) {
+  top: 62px;
+  left: 52px;
+  animation-delay: -1s;
+}
+
+.lds-default div:nth-child(12) {
+  top: 52px;
+  left: 62px;
+  animation-delay: -1.1s;
+}
+@keyframes lds-default {
+  0%, 20%, 80%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+}

apps/app/src/components/SavePageControls.tsx

@@ -22,6 +22,7 @@ import loggerFactory from '~/utils/logger';
 
 import { unpublish } from '../client/services/page-operation';
 
+import { LoadingSpinnerPulse } from './LoadingSpinnerPulse';
 import { GrantSelector } from './SavePageControls/GrantSelector';
 
 
@@ -47,7 +48,7 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
   const { data: _isWaitingSaveProcessing } = useWaitingSaveProcessing();
   const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
 
-  const isWaitingSaveProcessing = _isWaitingSaveProcessing === true; // ignore undefined
+  const isWaitingSaveProcessing = true;// _isWaitingSaveProcessing === true; // ignore undefined
 
   const updateGrantHandler = useCallback((grantData: IPageGrantData): void => {
     mutateGrant(grantData);
@@ -124,7 +125,7 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
           disabled={isWaitingSaveProcessing}
         >
           {isWaitingSaveProcessing && (
-            <i className="fa fa-spinner fa-pulse me-1"></i>
+            <LoadingSpinnerPulse />
           )}
           {labelSubmitButton}
         </Button>