feat: add an inital loading message and style

amoshydra · Feb 15, 2024 · 99efc01 · 99efc01
1 parent 1eefd76
commit 99efc01
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -6,8 +6,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BangleJS Home</title>
   </head>
+  <style>
+    :root {
+      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+      line-height: 1.5;
+      font-weight: 400;
+
+      color-scheme: light dark;
+      color: rgba(255, 255, 255, 0.87);
+      background-color: #242424;
+
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .inital-loader {
+      padding: 2rem;
+      text-align: center;
+    }
+  </style>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div class="inital-loader">
+        Loading application...
+      </div>
+    </div>
     <script>
       const SETTINGS = {
         pretokenise : true,

diff --git a/src/index.css b/src/index.css
@@ -1,18 +1,3 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 a {
   font-weight: 500;
   color: #646cff;