From e1b0d01ac320b9052c2d1ab3cc477d7c76689d31 Mon Sep 17 00:00:00 2001
From: Eugene Pankov <e@ajenti.org>
Date: Sun, 14 Nov 2021 16:54:51 +0100
Subject: [PATCH] added a spinner for the pre-bootstrap phase

---
 backend/tabby/settings.py         |  2 +-
 frontend/src/terminal-styles.scss | 44 +++++++++++++++++++++++++++++++
 frontend/src/terminal.html        |  5 ++++
 frontend/src/terminal.ts          |  8 ++++--
 4 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/backend/tabby/settings.py b/backend/tabby/settings.py
index 5edb44e..74d3325 100644
--- a/backend/tabby/settings.py
+++ b/backend/tabby/settings.py
@@ -211,7 +211,7 @@ for key in [
     'ENABLE_LOGIN',
     'ENABLE_HOMEPAGE',
 ]:
-    globals()[key] = bool(globals()[key]) if globals()[key] else None
+    globals()[key] = globals()[key] == 'True'
 
 
 for key in [
diff --git a/frontend/src/terminal-styles.scss b/frontend/src/terminal-styles.scss
index e69de29..03933f1 100644
--- a/frontend/src/terminal-styles.scss
+++ b/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;
+    }
+}
diff --git a/frontend/src/terminal.html b/frontend/src/terminal.html
index 8a0057a..48ebc3b 100644
--- a/frontend/src/terminal.html
+++ b/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>
diff --git a/frontend/src/terminal.ts b/frontend/src/terminal.ts
index de4fe1b..f9b4732 100644
--- a/frontend/src/terminal.ts
+++ b/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()
+})