Fix loading spinner

ParabolInc · Nov 11, 2024 · 0c04e75 · 0c04e75
1 parent 61fbf68
commit 0c04e75
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/webapp/src/components/loading_spinner.tsx b/webapp/src/components/loading_spinner.tsx
@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import React from 'react'
+
+type Props = {
+  text?: React.ReactNode
+  style?: React.CSSProperties
+}
+const LoadingSpinner = ({text, style}: Props) => {
+  return (
+    <span
+      id='loadingSpinner'
+      className={classNames('LoadingSpinner', {'with-text': Boolean(text)})}
+      style={style}
+      data-testid='loadingSpinner'
+    >
+      <span
+        className='fa fa-spinner fa-fw fa-pulse spinner'
+      />
+      {text}
+    </span>
+  )
+}
+
+export default LoadingSpinner
diff --git a/webapp/src/components/push_reflection/push_reflection_modal.tsx b/webapp/src/components/push_reflection/push_reflection_modal.tsx
@@ -1,6 +1,5 @@
 import React, {useEffect, useMemo} from 'react'
 import {Modal} from 'react-bootstrap'
-import Spinner from 'react-bootstrap/Spinner'
 import {useDispatch, useSelector} from 'react-redux'
 
 import {getPost} from 'mattermost-redux/selectors/entities/posts'
@@ -11,6 +10,7 @@ import {useCreateReflectionMutation, useGetActiveMeetingsQuery} from '../../api'
 import {closePushPostAsReflection} from '../../reducers'
 import {getAssetsUrl, getPostURL, pushPostAsReflection} from '../../selectors'
 import Select from '../select'
+import LoadingSpinner from '../loading_spinner'
 
 const PostUtils = (window as any).PostUtils
 
@@ -109,12 +109,7 @@ const PushReflectionModal = () => {
           <p>Choose an open Retro activity and the Prompt where you want to send the Mattermost comment. A reference link back to Mattermost will be inlcuded in the reflection.</p>
         </div>
         {isLoading &&
-        <Spinner
-          animation='border'
-          role='status'
-        >
-          <span className='visually-hidden'>Loading...</span>
-        </Spinner>
+        <LoadingSpinner text='Loading...'/>
         }
         {post && (
           <div className='form-group'>

diff --git a/webapp/src/components/start_activity/start_activity_modal.tsx b/webapp/src/components/start_activity/start_activity_modal.tsx
@@ -1,6 +1,5 @@
 import React, {useEffect, useMemo} from 'react'
 import {Modal} from 'react-bootstrap'
-import Spinner from 'react-bootstrap/Spinner'
 import {useDispatch, useSelector} from 'react-redux'
 
 import {isError, useGetConfigQuery, useGetTemplatesQuery} from '../../api'
@@ -10,6 +9,8 @@ import {getAssetsUrl, isStartActivityModalVisible} from '../../selectors'
 
 import Select from '../select'
 
+import LoadingSpinner from '../loading_spinner'
+
 import MeetingSettings from './meeting_settings'
 
 const StartActivityModal = () => {
@@ -94,12 +95,7 @@ const StartActivityModal = () => {
           <p>To see the full details for any activity, visit <a href={`${config?.parabolURL}/activity-library/`}>{"Parabol's Activity Library"}</a></p>
         </div>
         {isLoading &&
-          <Spinner
-            animation='border'
-            role='status'
-          >
-            <span className='visually-hidden'>Loading...</span>
-          </Spinner>
+          <LoadingSpinner text='Loading...'/>
         }
         {data && (<>
           <Select