Update loading spinner status (#28177)

* Update test for the loading spinner component

* Create a story for the loading spinner component

* Move role and use CSS for spacing instead

* Add a classname prop

* Reuse LoadingSpinner

* Use OLSpinner instead of Spinner

* Use data-testid since status role was moved

* Wait for journals to load

* Use `isLoading` prop instead and fix the button's height

* Use `isLoading` prop instead

* Use LoadingSpinner instead and remove spacing

* Update test for the loading spinner component

* Use `isLoading` prop instead

* Add aria-describedby to layout button for processing state

* Replace `spinner` to `ol-spinner`

* Scope status

* Remove redundant `div.loading`

---------

Co-authored-by: Antoine Clausse <antoine.clausse@overleaf.com>
GitOrigin-RevId: 8f43b991f8f458b2abd5a4661913ac9b972d892a

services/web/frontend/js/shared/components/button/button.tsx

@@ -1,9 +1,10 @@
 import { forwardRef } from 'react'
-import { Button as BS5Button, Spinner } from 'react-bootstrap'
+import { Button as BS5Button } from 'react-bootstrap'
 import type { ButtonProps } from '@/shared/components/types/button-props'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
+import OLSpinner from '../ol/ol-spinner'
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
@@ -56,13 +57,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {isLoading && (
           <span className="spinner-container">
-            <Spinner
-              animation="border"
-              aria-hidden="true"
-              as="span"
-              className={loadingSpinnerClassName}
-              role="status"
-            />
+            <OLSpinner size="sm" className={loadingSpinnerClassName} />
             <span className="visually-hidden">
               {loadingLabel ?? t('loading')}
             </span>