fix(gui): translate the initial progress screen
This commit is contained in:
parent
aed5e1bf12
commit
af05e05ea6
|
@ -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 * as React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
export function LoadingScreen() {
|
export function LoadingScreen() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return <Box sx={{
|
return <Box sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
minHeight: 512,
|
minHeight: window.innerHeight,
|
||||||
}}>
|
}}>
|
||||||
<Stack
|
<Stack
|
||||||
direction='column'
|
direction='column'
|
||||||
|
@ -14,6 +17,9 @@ export function LoadingScreen() {
|
||||||
sx={{ alignItems: 'center' }}
|
sx={{ alignItems: 'center' }}
|
||||||
>
|
>
|
||||||
<CircularProgress />
|
<CircularProgress />
|
||||||
|
<Typography>
|
||||||
|
{t('loading.server')}
|
||||||
|
</Typography>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>;
|
</Box>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,20 +44,6 @@ export const INITIAL_LOAD_TIMEOUT = 5_000;
|
||||||
export async function renderApp(config: Config, params: ServerParams, logger: Logger, client: ApiClient) {
|
export async function renderApp(config: Config, params: ServerParams, logger: Logger, client: ApiClient) {
|
||||||
const completeConfig = mergeConfig(config, params);
|
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');
|
logger.info('getting strings from server');
|
||||||
const strings = await client.strings();
|
const strings = await client.strings();
|
||||||
for (const [lang, translation] of Object.entries(strings)) {
|
for (const [lang, translation] of Object.entries(strings)) {
|
||||||
|
@ -145,6 +131,12 @@ export async function renderApp(config: Config, params: ServerParams, logger: Lo
|
||||||
</QueryClientProvider>;
|
</QueryClientProvider>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function renderProgress() {
|
||||||
|
return <I18nextProvider i18n={i18n}>
|
||||||
|
<LoadingScreen />
|
||||||
|
</I18nextProvider>;
|
||||||
|
}
|
||||||
|
|
||||||
export async function main() {
|
export async function main() {
|
||||||
const debug = isDebug();
|
const debug = isDebug();
|
||||||
const logger = createLogger({
|
const logger = createLogger({
|
||||||
|
@ -163,9 +155,23 @@ export async function main() {
|
||||||
const appElement = mustExist(document.getElementById('app'));
|
const appElement = mustExist(document.getElementById('app'));
|
||||||
const app = createRoot(appElement);
|
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 {
|
try {
|
||||||
logger.info('getting image parameters from server');
|
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
|
// load full params from the API server and merge with the initial client config
|
||||||
const params = await timeout(INITIAL_LOAD_TIMEOUT, client.params());
|
const params = await timeout(INITIAL_LOAD_TIMEOUT, client.params());
|
||||||
|
|
|
@ -44,6 +44,7 @@ export const I18N_STRINGS_DE = {
|
||||||
loading: {
|
loading: {
|
||||||
cancel: 'Stornieren',
|
cancel: 'Stornieren',
|
||||||
progress: '{{current}} von {{total}} Schritten',
|
progress: '{{current}} von {{total}} Schritten',
|
||||||
|
server: 'Verbindung zum Server...',
|
||||||
unknown: 'vielen',
|
unknown: 'vielen',
|
||||||
},
|
},
|
||||||
mask: {
|
mask: {
|
||||||
|
|
|
@ -39,6 +39,7 @@ export const I18N_STRINGS_EN = {
|
||||||
loading: {
|
loading: {
|
||||||
cancel: 'Cancel',
|
cancel: 'Cancel',
|
||||||
progress: '{{current}} of {{total}} steps',
|
progress: '{{current}} of {{total}} steps',
|
||||||
|
server: 'Connecting to server...',
|
||||||
unknown: 'many',
|
unknown: 'many',
|
||||||
},
|
},
|
||||||
mask: {
|
mask: {
|
||||||
|
|
|
@ -44,6 +44,7 @@ export const I18N_STRINGS_ES = {
|
||||||
loading: {
|
loading: {
|
||||||
cancel: 'Cancelar',
|
cancel: 'Cancelar',
|
||||||
progress: '{{current}} de {{total}} pasos',
|
progress: '{{current}} de {{total}} pasos',
|
||||||
|
server: 'Conectando al servidor...',
|
||||||
unknown: 'muchos',
|
unknown: 'muchos',
|
||||||
},
|
},
|
||||||
mask: {
|
mask: {
|
||||||
|
|
|
@ -44,6 +44,7 @@ export const I18N_STRINGS_FR = {
|
||||||
loading: {
|
loading: {
|
||||||
cancel: 'Annuler',
|
cancel: 'Annuler',
|
||||||
progress: '{{current}} des {{total}} étapes',
|
progress: '{{current}} des {{total}} étapes',
|
||||||
|
server: 'Connexion au serveur...',
|
||||||
unknown: 'nombreuses',
|
unknown: 'nombreuses',
|
||||||
},
|
},
|
||||||
mask: {
|
mask: {
|
||||||
|
|
Loading…
Reference in New Issue