From aed5e1bf12e4b8896aa3569646a32aaafc9fcade Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sun, 5 Mar 2023 16:41:31 -0600
Subject: [PATCH] feat(gui): add loading spinner while fetching server params

---
 gui/src/components/LoadingScreen.tsx | 19 +++++++++++++++++++
 gui/src/main.tsx                     |  4 ++++
 2 files changed, 23 insertions(+)
 create mode 100644 gui/src/components/LoadingScreen.tsx

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 <Box sx={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 512,
+  }}>
+    <Stack
+      direction='column'
+      spacing={2}
+      sx={{ alignItems: 'center' }}
+    >
+      <CircularProgress />
+    </Stack>
+  </Box>;
+}
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(<LoadingScreen />);
+
     // 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');