added a spinner for the pre-bootstrap phase

frontend/src/terminal-styles.scss

@@ -0,0 +1,44 @@
+.pre-bootstrap-spinner {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    width: 50px;
+    height: 20px;
+    margin-left: -25px;
+
+    .spinner {
+        display: inline-block;
+        position: relative;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: #fff;
+        animation: spinner ease infinite 1s;
+        opacity: 0.7;
+
+        &.n2 {
+            animation-delay: -0.33s;
+        }
+
+        &.n3 {
+            animation-delay: -0.66s;
+        }
+    }
+}
+
+@keyframes spinner {
+    0% {
+        left: -20px;
+        top: 0;
+    }
+
+    50% {
+        left: 20px;
+        top: 0;
+    }
+
+    100% {
+        left: -20px;
+        top: 0;
+    }
+}

frontend/src/terminal.html

@@ -17,5 +17,10 @@
         </div>
       </div>
     </app-root>
+    <div class="pre-bootstrap-spinner">
+        <div class="spinner"></div>
+        <div class="spinner n2"></div>
+        <div class="spinner n3"></div>
+    </div>
   </body>
 </html>

frontend/src/terminal.ts

@@ -55,7 +55,7 @@ async function start () {
   })
 
   const config = connector.loadConfig()
-  tabby.bootstrap({
+  await tabby.bootstrap({
     packageModules: pluginModules,
     bootstrapData: {
       config,
@@ -69,4 +69,8 @@ async function start () {
     connector,
   })
 }
-start()
+
+const spinner = document.body.querySelector('.pre-bootstrap-spinner')
+start().finally(() => {
+  spinner?.remove()
+})