Update loading spinner in Chat (#21624)

GitOrigin-RevId: 6af510b7e229249dd5192ceba2ec88e95339cab5

services/web/frontend/js/features/chat/components/chat-pane.tsx

@@ -10,13 +10,17 @@ import { useUserContext } from '../../../shared/context/user-context'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 import { FetchError } from '../../../infrastructure/fetch-json'
 import { useChatContext } from '../context/chat-context'
-import LoadingSpinner from '../../../shared/components/loading-spinner'
+import { FullSizeLoadingSpinner } from '../../../shared/components/loading-spinner'
 import { bsVersion } from '@/features/utils/bootstrap-5'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import MaterialIcon from '@/shared/components/material-icon'
 
 const MessageList = lazy(() => import('./message-list'))
 
+const Loading = () => (
+  <FullSizeLoadingSpinner delay={500} className={bsVersion({ bs5: 'pt-4' })} />
+)
+
 const ChatPane = React.memo(function ChatPane() {
   const { t } = useTranslation()
 
@@ -85,8 +89,8 @@ const ChatPane = React.memo(function ChatPane() {
           <h2 className={bsVersion({ bs3: 'sr-only', bs5: 'visually-hidden' })}>
             {t('chat')}
           </h2>
-          <Suspense fallback={<LoadingSpinner delay={500} />}>
-            {status === 'pending' && <LoadingSpinner delay={500} />}
+          <Suspense fallback={<Loading />}>
+            {status === 'pending' && <Loading />}
             {shouldDisplayPlaceholder && <Placeholder />}
             <MessageList
               messages={messages}

services/web/frontend/js/shared/components/loading-spinner.tsx

@@ -58,14 +58,19 @@ export function FullSizeLoadingSpinner({
   minHeight,
   loadingText,
   size = 'sm',
+  className,
 }: {
   delay?: 0 | 500
   minHeight?: string
   loadingText?: string
   size?: OLSpinnerSize
+  className?: string
 }) {
   return (
-    <div className="full-size-loading-spinner-container" style={{ minHeight }}>
+    <div
+      className={classNames('full-size-loading-spinner-container', className)}
+      style={{ minHeight }}
+    >
       <LoadingSpinner size={size} loadingText={loadingText} delay={delay} />
     </div>
   )