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 { 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>;
|
||||
}
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -44,6 +44,7 @@ export const I18N_STRINGS_DE = {
|
|||
loading: {
|
||||
cancel: 'Stornieren',
|
||||
progress: '{{current}} von {{total}} Schritten',
|
||||
server: 'Verbindung zum Server...',
|
||||
unknown: 'vielen',
|
||||
},
|
||||
mask: {
|
||||
|
|
|
@ -39,6 +39,7 @@ export const I18N_STRINGS_EN = {
|
|||
loading: {
|
||||
cancel: 'Cancel',
|
||||
progress: '{{current}} of {{total}} steps',
|
||||
server: 'Connecting to server...',
|
||||
unknown: 'many',
|
||||
},
|
||||
mask: {
|
||||
|
|
|
@ -44,6 +44,7 @@ export const I18N_STRINGS_ES = {
|
|||
loading: {
|
||||
cancel: 'Cancelar',
|
||||
progress: '{{current}} de {{total}} pasos',
|
||||
server: 'Conectando al servidor...',
|
||||
unknown: 'muchos',
|
||||
},
|
||||
mask: {
|
||||
|
|
|
@ -44,6 +44,7 @@ export const I18N_STRINGS_FR = {
|
|||
loading: {
|
||||
cancel: 'Annuler',
|
||||
progress: '{{current}} des {{total}} étapes',
|
||||
server: 'Connexion au serveur...',
|
||||
unknown: 'nombreuses',
|
||||
},
|
||||
mask: {
|
||||
|
|
Loading…
Reference in New Issue