Merge pull request #8516 from weseek/imprv/133910-140441-replace-spinner

imprv: 133910 140441 replace spinner

apps/app/src/components/LoadingSpinner.jsx

@@ -0,0 +1,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>
+);

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

@@ -0,0 +1,39 @@
+.spinner {
+  animation: animation-rotate 750ms infinite linear;
+}
+
+// refs: https://github.com/weseek/growi/blob/master/apps/app/src/styles/atoms/_spinners.scss
+@keyframes animation-rotate {
+  100% {
+    transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes animation-rotate {
+  100% {
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-ms-keyframes animation-rotate {
+  100% {
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes animation-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes animation-rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

apps/app/src/components/LoginForm.tsx

@@ -14,7 +14,7 @@ import { RegistrationMode } from '~/interfaces/registration-mode';
 import { toArrayIfNot } from '~/utils/array-utils';
 
 import { CompleteUserRegistration } from './CompleteUserRegistration';
-
+import { LoadingSpinner } from './LoadingSpinner';
 
 import styles from './LoginForm.module.scss';
 
@@ -238,8 +238,11 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             >
               <div className="eff"></div>
               <span className="btn-label">
-                {/* spinner.Tentative decision meiri-k 11.17 */}
-                <span className="material-symbols-outlined">{isLoading ? 'hoge' : 'login'}</span>
+                {isLoading ? (
+                  <LoadingSpinner />
+                ) : (
+                  <span className="material-symbols-outlined">login</span>
+                )}
               </span>
               <span className="btn-label-text">{t('Sign in')}</span>
             </button>
@@ -513,8 +516,11 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             >
               <div className="eff"></div>
               <span className="btn-label">
-                {/* spinner.Tentative decision meiri-k 11.17 */}
-                <span className="material-symbols-outlined">{isLoading ? 'hoge' : 'login'}</span>
+                {isLoading ? (
+                  <LoadingSpinner />
+                ) : (
+                  <span className="material-symbols-outlined">login</span>
+                )}
               </span>
               <span className="btn-label-text">{submitText}</span>
             </button>