move className from outside to component direct

Search: <span className="(.*)"><LoadingSpinnerPulse /></span>
Replace: <LoadingSpinnerPulse className="$1" />

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -66,7 +66,7 @@ const QuestionnaireSettings = (): JSX.Element => {
 
       {isLoading && (
         <div className="text-muted text-center mb-5">
-          <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+          <LoadingSpinnerPulse className="me-1 fs-3" />
         </div>
       )}
 

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

@@ -213,7 +213,7 @@ export const AuditLogManagement: FC = () => {
           { isLoading
             ? (
               <div className="text-muted text-center mb-5">
-                <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+                <LoadingSpinnerPulse className="me-1 fs-3" />
               </div>
             )
             : (

apps/app/src/components/Admin/ElasticsearchManagement/ReconnectControls.tsx

@@ -23,7 +23,7 @@ const ReconnectControls = (props: Props): JSX.Element => {
         onClick={() => { props.onReconnectingRequested() }}
         disabled={!isEnabled}
       >
-        { isProcessing && <span className="me-2"><LoadingSpinnerPulse /></span> }
+        { isProcessing && <LoadingSpinnerPulse className="me-2" /> }
         { t('full_text_search_management.reconnect_button') }
       </button>
 

apps/app/src/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -188,7 +188,7 @@ const SlackIntegration = () => {
   if (isLoading) {
     return (
       <div className="text-muted text-center">
-        <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+        <LoadingSpinnerPulse className="me-1 fs-3" />
       </div>
     );
   }

apps/app/src/components/Admin/Users/PasswordResetModal.jsx

@@ -54,7 +54,7 @@ class PasswordResetModal extends React.Component {
           onClick={this.onClickSendNewPasswordButton}
           disabled={!isMailerSetup || isEmailSending || isEmailSent}
         >
-          {isEmailSending && <span className="mx-2"><LoadingSpinnerPulse /></span>}
+          {isEmailSending && <LoadingSpinnerPulse className="mx-2" />}
           {!isEmailSending && (isEmailSent ? t('commons:Done') : t('commons:Send'))}
         </button>
         <button type="submit" className="btn btn-danger" onClick={this.props.onClose}>

apps/app/src/components/DescendantsPageList.tsx

@@ -87,7 +87,7 @@ const DescendantsPageListSubstance = (props: SubstanceProps): JSX.Element => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+          <LoadingSpinnerPulse className="me-1 fs-3" />
         </div>
       </div>
     );

apps/app/src/components/InAppNotification/InAppNotificationList.tsx

@@ -22,7 +22,7 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+          <LoadingSpinnerPulse className="me-1 fs-3" />
         </div>
       </div>
     );

apps/app/src/components/InAppNotification/InAppNotificationPage.tsx

@@ -66,7 +66,7 @@ export const InAppNotificationPage: FC = () => {
       return (
         <div className="wiki" data-testid="grw-in-app-notification-page-spinner">
           <div className="text-muted text-center">
-            <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+            <LoadingSpinnerPulse className="me-1 fs-3" />
           </div>
         </div>
       );

apps/app/src/components/InfiniteScroll.tsx

@@ -33,7 +33,7 @@ const useIntersection = <E extends HTMLElement>(): [boolean, Ref<E>] => {
 const LoadingIndicator = (): React.ReactElement => {
   return (
     <div className="text-muted text-center">
-      <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+      <LoadingSpinnerPulse className="me-1 fs-3" />
     </div>
   );
 };

apps/app/src/components/Me/QuestionnaireSettings.tsx

@@ -47,7 +47,7 @@ export const QuestionnaireSettings = (): JSX.Element => {
 
       {isLoadingCurrentUser && (
         <div className="text-muted text-center mb-5">
-          <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+          <LoadingSpinnerPulse className="me-1 fs-3" />
         </div>
       )}
 

apps/app/src/components/Page/RevisionLoader.tsx

@@ -66,7 +66,7 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+          <LoadingSpinnerPulse className="me-1 fs-3" />
         </div>
       </div>
     );

apps/app/src/components/PageAccessoriesModal/PageAttachment.tsx

@@ -64,7 +64,7 @@ const PageAttachment = (): JSX.Element => {
     if (dataAttachments == null || inUseAttachmentsMap == null) {
       return (
         <div className="text-muted text-center">
-          <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+          <LoadingSpinnerPulse className="me-1 fs-3" />
         </div>
       );
     }

apps/app/src/components/PageEditor/DrawioModal.tsx

@@ -135,7 +135,7 @@ export const DrawioModal = (): JSX.Element => {
         {/* Loading spinner */}
         <div className="w-100 h-100 position-absolute d-flex">
           <div className="mx-auto my-auto">
-            <span className="mx-auto text-muted fs-2"><LoadingSpinnerPulse /></span>
+            <LoadingSpinnerPulse className="mx-auto text-muted fs-2" />
           </div>
         </div>
         {/* iframe */}

apps/app/src/components/PageList/PageList.tsx

@@ -31,7 +31,7 @@ const PageList = (props: Props<IPageInfoForEntity>): JSX.Element => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+          <LoadingSpinnerPulse className="me-1 fs-3" />
         </div>
       </div>
     );

apps/app/src/components/PagePresentationModal.tsx

@@ -23,7 +23,7 @@ import styles from './PagePresentationModal.module.scss';
 const Presentation = dynamic<PresentationProps>(() => import('./Presentation/Presentation').then(mod => mod.Presentation), {
   ssr: false,
   loading: () => (
-    <span className="text-muted fs-1"><LoadingSpinnerPulse /></span>
+    <LoadingSpinnerPulse className="text-muted fs-1" />
   ),
 });
 

apps/app/src/components/PrivateLegacyPages.tsx

@@ -63,7 +63,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
   if (migrationStatus == null) {
     return (
       <div className="mw-0 flex-grow-1 flex-basis-0 m-5 text-muted text-center">
-        <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+        <LoadingSpinnerPulse className="me-1 fs-3" />
       </div>
     );
   }

apps/app/src/components/SavePageControls/GrantSelector/GrantSelector.tsx

@@ -183,7 +183,7 @@ export const GrantSelector = (props: Props): JSX.Element => {
     if (myUserGroups == null) {
       return (
         <div className="my-3 text-center">
-          <span className="mx-auto text-muted fs-4"><LoadingSpinnerPulse /></span>
+          <LoadingSpinnerPulse className="mx-auto text-muted fs-4" />
         </div>
       );
     }

apps/app/src/components/SearchPage/SearchPageBase.tsx

@@ -183,7 +183,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
           {/* Loading */}
           { pages == null && (
             <div className="mw-0 flex-grow-1 flex-basis-0 m-5 text-muted text-center">
-              <span className="me-1 fs-3"><LoadingSpinnerPulse /></span>
+              <LoadingSpinnerPulse className="me-1 fs-3" />
             </div>
           ) }
 

apps/app/src/components/TemplateModal/TemplateModal.tsx

@@ -187,7 +187,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
 
             { isLoading && (
               <div className="h-100 d-flex justify-content-center align-items-center">
-                <span className="mx-auto text-muted fs-3"><LoadingSpinnerPulse /></span>
+                <LoadingSpinnerPulse className="mx-auto text-muted fs-3" />
               </div>
             ) }
 

apps/app/src/components/TreeItem/SimpleItem.tsx

@@ -249,7 +249,7 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
               <ItemClassFixed {...itemProps} />
               {isProcessingSubmission && (currentChildren.length - 1 === index) && (
                 <div className="text-muted text-center">
-                  <span className="mr-1"><LoadingSpinnerPulse /></span>
+                  <LoadingSpinnerPulse className="mr-1" />
                 </div>
               )}
             </div>

apps/app/src/pages/tags.page.tsx

@@ -91,7 +91,7 @@ const TagPage: NextPageWithLayout<CommonProps> = (props: Props) => {
           { isLoading
             ? (
               <div className="text-muted text-center">
-                <span className="mt-3 fs-3"><LoadingSpinnerPulse /></span>
+                <LoadingSpinnerPulse className="mt-3 fs-3" />
               </div>
             )
             : (