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