fix(gui): translate the initial progress screen

gui/src/components/LoadingScreen.tsx

@@ -1,12 +1,15 @@
-import { Box, CircularProgress, Stack } from '@mui/material';
+import { Box, CircularProgress, Stack, Typography } from '@mui/material';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export function LoadingScreen() {
+  const { t } = useTranslation();
+
   return <Box sx={{
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    minHeight: 512,
+    minHeight: window.innerHeight,
   }}>
     <Stack
       direction='column'
@@ -14,6 +17,9 @@ export function LoadingScreen() {
       sx={{ alignItems: 'center' }}
     >
       <CircularProgress />
+      <Typography>
+        {t('loading.server')}
+      </Typography>
     </Stack>
   </Box>;
 }

gui/src/main.tsx

@@ -44,20 +44,6 @@ export const INITIAL_LOAD_TIMEOUT = 5_000;
 export async function renderApp(config: Config, params: ServerParams, logger: Logger, client: ApiClient) {
   const completeConfig = mergeConfig(config, params);
 
-  // prep i18next
-  await i18n
-    .use(LanguageDetector)
-    .use(initReactI18next)
-    .init({
-      debug: true,
-      fallbackLng: 'en',
-      interpolation: {
-        escapeValue: false, // not needed for react as it escapes by default
-      },
-      resources: I18N_STRINGS,
-      returnEmptyString: false,
-    });
-
   logger.info('getting strings from server');
   const strings = await client.strings();
   for (const [lang, translation] of Object.entries(strings)) {
@@ -145,6 +131,12 @@ export async function renderApp(config: Config, params: ServerParams, logger: Lo
   </QueryClientProvider>;
 }
 
+export async function renderProgress() {
+  return <I18nextProvider i18n={i18n}>
+    <LoadingScreen />
+  </I18nextProvider>;
+}
+
 export async function main() {
   const debug = isDebug();
   const logger = createLogger({
@@ -163,9 +155,23 @@ export async function main() {
   const appElement = mustExist(document.getElementById('app'));
   const app = createRoot(appElement);
 
+  // prep i18next
+  await i18n
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      debug: true,
+      fallbackLng: 'en',
+      interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+      },
+      resources: I18N_STRINGS,
+      returnEmptyString: false,
+    });
+
   try {
     logger.info('getting image parameters from server');
-    app.render(<LoadingScreen />);
+    app.render(await renderProgress());
 
     // load full params from the API server and merge with the initial client config
     const params = await timeout(INITIAL_LOAD_TIMEOUT, client.params());

gui/src/strings/de.ts

@@ -44,6 +44,7 @@ export const I18N_STRINGS_DE = {
       loading: {
         cancel: 'Stornieren',
         progress: '{{current}} von {{total}} Schritten',
+        server: 'Verbindung zum Server...',
         unknown: 'vielen',
       },
       mask: {

gui/src/strings/en.ts

@@ -39,6 +39,7 @@ export const I18N_STRINGS_EN = {
       loading: {
         cancel: 'Cancel',
         progress: '{{current}} of {{total}} steps',
+        server: 'Connecting to server...',
         unknown: 'many',
       },
       mask: {

gui/src/strings/es.ts

@@ -44,6 +44,7 @@ export const I18N_STRINGS_ES = {
       loading: {
         cancel: 'Cancelar',
         progress: '{{current}} de {{total}} pasos',
+        server: 'Conectando al servidor...',
         unknown: 'muchos',
       },
       mask: {

gui/src/strings/fr.ts

@@ -44,6 +44,7 @@ export const I18N_STRINGS_FR = {
       loading: {
         cancel: 'Annuler',
         progress: '{{current}} des {{total}} étapes',
+        server: 'Connexion au serveur...',
         unknown: 'nombreuses',
       },
       mask: {