diff --git a/gui/src/components/LoadingScreen.tsx b/gui/src/components/LoadingScreen.tsx
new file mode 100644
index 00000000..2162ab45
--- /dev/null
+++ b/gui/src/components/LoadingScreen.tsx
@@ -0,0 +1,19 @@
+import { Box, CircularProgress, Stack } from '@mui/material';
+import * as React from 'react';
+
+export function LoadingScreen() {
+ return
+
+
+
+ ;
+}
diff --git a/gui/src/main.tsx b/gui/src/main.tsx
index e44cfffa..97c9824c 100644
--- a/gui/src/main.tsx
+++ b/gui/src/main.tsx
@@ -1,4 +1,5 @@
import { mustDefault, mustExist, timeout, TimeoutError } from '@apextoaster/js-utils';
+import { Box, CircularProgress } from '@mui/material';
import { createLogger, Logger } from 'browser-bunyan';
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
@@ -14,6 +15,7 @@ import { ApiClient, makeClient } from './client/api.js';
import { LOCAL_CLIENT } from './client/local.js';
import { ParamsVersionError } from './components/error/ParamsVersion.js';
import { ServerParamsError } from './components/error/ServerParams.js';
+import { LoadingScreen } from './components/LoadingScreen.js';
import { OnnxError } from './components/OnnxError.js';
import { OnnxWeb } from './components/OnnxWeb.js';
import {
@@ -163,6 +165,8 @@ export async function main() {
try {
logger.info('getting image parameters from server');
+ app.render();
+
// load full params from the API server and merge with the initial client config
const params = await timeout(INITIAL_LOAD_TIMEOUT, client.params());
const version = mustDefault(params.version, '0.0.0');