[web] Migrate IDE page loading screen to BS5 (#20896)

* [web] Add `.loading-screen` style

* [web] Add `.loading-screen-error` style

* [web] Nest styles in `.loading-screen`

* [web] Simplify code, make a more valuable Storybook

* [web] Add a reusable bootstrap-switcher argument to loading.stories.tsx

* [web] Make `isBootstrap5()` work in storybook

* [web] Revert unrelated changes around `ConnectionError` type

* [web] Remove comment about unhandled error codes

https://github.com/overleaf/internal/pull/20896/files#r1790572314

* [web] Don't repeat the `errorCode` prop type

* [web] Remove unused CSS and magic padding

* [web] Fixup SCSS division

* [storybook] Revert Storybook changes (moved to another branch)

* [web] Fixup SCSS division again (lint)

* [web] Render with `Boolean(errorCode) && ...` instead of `errorCode && ...`

* [web] Remove importants; use spacing var

Addresses Tim's comments

GitOrigin-RevId: e8b5623f4bb9aa72a255851f46b45b652a0dbb16

services/web/frontend/js/features/ide-react/components/loading.tsx

@@ -4,7 +4,7 @@ import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 import getMeta from '@/utils/meta'
 import { useConnectionContext } from '../context/connection-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
-import { LoadingError } from './loading-error'
+import { LoadingError, LoadingErrorProps } from './loading-error'
 
 type Part = 'initial' | 'render' | 'connection' | 'translations' | 'project'
 
@@ -58,23 +58,30 @@ export const Loading: FC<{
   // Use loading text from the server, because i18n will not be ready initially
   const label = getMeta('ol-loadingText')
 
-  const hasError = Boolean(connectionState.error || i18n.error)
+  const errorCode = connectionState.error ?? (i18n.error ? 'i18n-error' : '')
 
+  return <LoadingUI progress={progress} label={label} errorCode={errorCode} />
+}
+
+type LoadingUiProps = {
+  progress: number
+  label: string
+  errorCode: LoadingErrorProps['errorCode']
+}
+
+export const LoadingUI: FC<LoadingUiProps> = ({
+  progress,
+  label,
+  errorCode,
+}) => {
   return (
     <div className="loading-screen">
       <LoadingBranded
         loadProgress={progress}
         label={label}
-        hasError={hasError}
+        hasError={Boolean(errorCode)}
       />
-      {hasError && (
-        <p className="loading-screen-error">
-          <LoadingError
-            connectionStateError={connectionState.error}
-            i18nError={i18n.error}
-          />
-        </p>
-      )}
+      {Boolean(errorCode) && <LoadingError errorCode={errorCode} />}
     </div>
   )
 }