Add translated messages for more connection error states (#19392)

GitOrigin-RevId: 981de624f3964ebe3ff1f0c751fcef9158864d5e

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

@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import { ConnectionError } from '@/features/ide-react/connection/types/connection-state'
+import getMeta from '@/utils/meta'
+
+// 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
+}

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

@@ -4,6 +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'
 
 type Part = 'initial' | 'render' | 'connection' | 'translations' | 'project'
 
@@ -54,21 +55,6 @@ export const Loading: FC<{
     }
   }, [projectJoined])
 
-  const getLoadingScreenError = (): string => {
-    if (connectionState.error) {
-      // NOTE: translations not ready yet
-      return connectionState.error === 'io-not-loaded'
-        ? 'Could not connect to websocket server :('
-        : connectionState.error
-    }
-
-    if (i18n.error) {
-      return getMeta('ol-translationLoadErrorMessage')
-    }
-
-    return ''
-  }
-
   // Use loading text from the server, because i18n will not be ready initially
   const label = getMeta('ol-loadingText')
 
@@ -82,7 +68,12 @@ export const Loading: FC<{
         hasError={hasError}
       />
       {hasError && (
-        <p className="loading-screen-error">{getLoadingScreenError()}</p>
+        <p className="loading-screen-error">
+          <LoadingError
+            connectionStateError={connectionState.error}
+            i18nError={i18n.error}
+          />
+        </p>
       )}
     </div>
   )