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
+
+ {t('loading.server')}
+
;
}
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
;
}
+export async function renderProgress() {
+ return
+
+ ;
+}
+
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();
+ 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: {