From af05e05ea6bdefbf1205448c84e8c48ec3bfe51b Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sun, 5 Mar 2023 16:51:29 -0600
Subject: [PATCH] fix(gui): translate the initial progress screen

---
 gui/src/components/LoadingScreen.tsx | 10 ++++++--
 gui/src/main.tsx                     | 36 ++++++++++++++++------------
 gui/src/strings/de.ts                |  1 +
 gui/src/strings/en.ts                |  1 +
 gui/src/strings/es.ts                |  1 +
 gui/src/strings/fr.ts                |  1 +
 6 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/gui/src/components/LoadingScreen.tsx b/gui/src/components/LoadingScreen.tsx
index 2162ab45..8f41df30 100644
--- a/gui/src/components/LoadingScreen.tsx
+++ b/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>;
 }
diff --git a/gui/src/main.tsx b/gui/src/main.tsx
index 97c9824c..c1ac0100 100644
--- a/gui/src/main.tsx
+++ b/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());
diff --git a/gui/src/strings/de.ts b/gui/src/strings/de.ts
index 3c2a08b6..16818afb 100644
--- a/gui/src/strings/de.ts
+++ b/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: {
diff --git a/gui/src/strings/en.ts b/gui/src/strings/en.ts
index 913e6c85..07dc24ff 100644
--- a/gui/src/strings/en.ts
+++ b/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: {
diff --git a/gui/src/strings/es.ts b/gui/src/strings/es.ts
index 2b353a4f..8a18d3f0 100644
--- a/gui/src/strings/es.ts
+++ b/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: {
diff --git a/gui/src/strings/fr.ts b/gui/src/strings/fr.ts
index e43e4999..5eb4dd79 100644
--- a/gui/src/strings/fr.ts
+++ b/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: {