From ee6a41c4f4b9a9a718a1887166927a6664a72b49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Fri, 25 Oct 2024 17:54:37 +0200
Subject: [PATCH] FIX: Nicer loading image

---
 webapp/src/App.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
index ef41e4f..4782a9a 100644
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -15,11 +15,12 @@ import {
   selectModelFromStorage,
 } from "./AppComponents/storage";
 import { WorkbookState } from "./components/workbookState";
+import { IronCalcIcon } from "./icons";
 
 function App() {
   const [model, setModel] = useState<Model | null>(null);
   const [workbookState, setWorkbookState] = useState<WorkbookState | null>(
-    null,
+    null
   );
 
   useEffect(() => {
@@ -51,7 +52,12 @@ function App() {
   }, []);
 
   if (!model || !workbookState) {
-    return <Loading>Loading</Loading>;
+    return (
+      <Loading>
+        <IronCalcIcon style={{width: 24, height: 24, marginBottom: 16}} />
+        <div>Loading IronCalc</div>
+      </Loading>
+    );
   }
 
   // We try to save the model every second
@@ -112,9 +118,11 @@ const Wrapper = styled("div")`
 const Loading = styled("div")`
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: 36px;
+  font-family: 'Inter';
+  font-size: 14px;
 `;
 
 export default App;