Merge branch 'imprv/133910-141781-g2g-transfer-loading-icon' into imprv/133910-141426-replace-spinner-pulse

apps/app/src/components/Admin/G2GDataTransfer.tsx

@@ -247,10 +247,10 @@ const G2GDataTransfer = (): JSX.Element => {
 
       {isTransferring && (
         <div className="border rounded p-4">
-          <div>
-            <G2GDataTransferStatusIcon className="me-2 mb-2" status={g2gProgress.mongo} /> MongoDB
+          <div className="my-2">
+            <G2GDataTransferStatusIcon className="me-2" status={g2gProgress.mongo} /> MongoDB
           </div>
-          <div>
+          <div className="my-2">
             <G2GDataTransferStatusIcon className="me-2" status={g2gProgress.attachments} /> Attachments
           </div>
         </div>

apps/app/src/components/Admin/G2GDataTransferStatusIcon.tsx

@@ -2,10 +2,12 @@ import React, { type ComponentPropsWithoutRef } from 'react';
 
 import { G2G_PROGRESS_STATUS, type G2GProgressStatus } from '~/interfaces/g2g-transfer';
 
+import { LoadingSpinner } from '../LoadingSpinner';
+
 /**
  * Props for {@link G2GDataTransferStatusIcon}
  */
-interface Props extends ComponentPropsWithoutRef<'i'>{
+interface Props extends ComponentPropsWithoutRef<'span'>{
   status: G2GProgressStatus;
 }
 
@@ -15,8 +17,7 @@ interface Props extends ComponentPropsWithoutRef<'i'>{
 const G2GDataTransferStatusIcon = ({ status, className, ...props }: Props): JSX.Element => {
   if (status === G2G_PROGRESS_STATUS.IN_PROGRESS) {
     return (
-      // TODO: https://redmine.weseek.co.jp/issues/141781
-      <i className={`fa fa-spinner fa-pulse fa-fw ${className}`} aria-label="in progress" {...props} />
+      <LoadingSpinner className={`${className}`} aria-label="in progress" {...props} />
     );
   }
 

apps/app/src/components/LoadingSpinner.tsx

@@ -2,6 +2,6 @@ import React, { type ComponentPropsWithoutRef } from 'react';
 
 import styles from './LoadingSpinner.module.scss';
 
-export const LoadingSpinner = ({ className }: ComponentPropsWithoutRef<'span'>): JSX.Element => (
+export const LoadingSpinner = ({ className = '' }: ComponentPropsWithoutRef<'span'>): JSX.Element => (
   <span className={`material-symbols-outlined pb-0 ${styles.spinner} ${className}`}>progress_activity</span>
 );