Merge pull request #8561 from weseek/imprv/133910-141781-g2g-transfer-loading-icon

imprv: 133910 141781 g2g transfer loading icon

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,7 +17,7 @@ interface Props extends ComponentPropsWithoutRef<'i'>{
 const G2GDataTransferStatusIcon = ({ status, className, ...props }: Props): JSX.Element => {
   if (status === G2G_PROGRESS_STATUS.IN_PROGRESS) {
     return (
-      <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.jsx

@@ -1,7 +0,0 @@
-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.tsx

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