Add loading files message

closes #72

static/css/site.css

@@ -51,14 +51,6 @@ input[type=text] {
     font-weight: bold;
 }
 
-#colorInputDiv {
-    font-size: 14px;
-}
-
-#colorInput {
-    border: 2px solid var(--var-message-color);
-}
-
 .root {
     max-width: var(--var-max-width);
     max-height: var(--var-max-height);
@@ -184,8 +176,15 @@ input[type=text] {
     width: 100%;
 }
 
+#loadingFiles {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
 #chatwindow {
-    display: grid;
+    display: none;
     grid-template-rows: auto 1fr;
     position: relative;
     padding-top: 1vh;
@@ -221,6 +220,15 @@ input[type=text] {
     margin-bottom: 5px;
 }
 
+#colorInputDiv {
+    font-size: 14px;
+}
+
+#colorInput {
+    border: 2px solid var(--var-message-color);
+}
+
+
 #playing {
     color: #288a85;
     font-size: x-Large;

static/js/chat.js

@@ -42,6 +42,9 @@ function startGo() {
     const go = new Go();
     WebAssembly.instantiateStreaming(fetch("/static/main.wasm"), go.importObject).then((result) => {
         go.run(result.instance);
+    }).then(() => {
+        $("#chatwindow").css("display", "grid");
+        $("#loadingFiles").css("display", "none");
     }).catch((err) => {
         console.error(err);
     });

static/main.html

@@ -42,6 +42,9 @@
 {{end}}
 
 {{if .Chat}}
+<div id="loadingFiles" class="contrast">
+    Files Loading
+</div>
 <div id="chatwindow">
     <div id="notifyBox"></div>
     <div id="chat" style="display: none;">