[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-error.tsx

@@ -2,25 +2,23 @@ import { FC } from 'react'
 import { ConnectionError } from '@/features/ide-react/connection/types/connection-state'
 import getMeta from '@/utils/meta'
 
+const errorMessages = {
+  'io-not-loaded': 'ol-translationIoNotLoaded',
+  'unable-to-join': 'ol-translationUnableToJoin',
+  'i18n-error': 'ol-translationLoadErrorMessage',
+} as const
+
+const isHandledCode = (key: string): key is keyof typeof errorMessages =>
+  key in errorMessages
+
+export type LoadingErrorProps = {
+  errorCode: ConnectionError | 'i18n-error' | ''
+}
+
 // NOTE: i18n translations might not be loaded in the client at this point,
 // so these translations have to be loaded from meta tags
-export const LoadingError: FC<{
-  connectionStateError: ConnectionError | ''
-  i18nError?: Error
-}> = ({ connectionStateError, i18nError }) => {
-  if (connectionStateError) {
-    switch (connectionStateError) {
-      case 'io-not-loaded':
-        return <>{getMeta('ol-translationIoNotLoaded')}</>
-
-      case 'unable-to-join':
-        return <>{getMeta('ol-translationUnableToJoin')}</>
-    }
-  }
-
-  if (i18nError) {
-    return <>{getMeta('ol-translationLoadErrorMessage')}</>
-  }
-
-  return null
+export const LoadingError: FC<LoadingErrorProps> = ({ errorCode }) => {
+  return isHandledCode(errorCode) ? (
+    <p className="loading-screen-error">{getMeta(errorMessages[errorCode])}</p>
+  ) : null
 }

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>
   )
 }