From a21dd6b74fd0c9138212c80b82b8fe88f8df8308 Mon Sep 17 00:00:00 2001
From: Marcus Noble <github@marcusnoble.co.uk>
Date: Sat, 15 May 2021 11:24:50 +0100
Subject: [PATCH] Added loading indicator

---
 views/index.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/views/index.html b/views/index.html
index fb9af46..b614df8 100644
--- a/views/index.html
+++ b/views/index.html
@@ -20,6 +20,7 @@
     <script src="/static/favicon.js"></script>
 
     <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue-progressbar@0.7.5/dist/vue-progressbar.min.js"></script>
     <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
     <script src="https://unpkg.com/dayjs@1.9.5/plugin/relativeTime.js"></script>
     <script>dayjs.extend(window.dayjs_plugin_relativeTime)</script>
@@ -136,7 +137,7 @@
           </div>
         </div>
 
-
+        <vue-progress-bar></vue-progress-bar>
       </div>
 
       <script>
@@ -149,6 +150,21 @@
             rect.right <= (window.innerWidth || document.documentElement.clientWidth)
           );
         }
+
+        Vue.use(VueProgressBar, {
+          color: '#00bcd4',
+          failedColor: '#ff2e88',
+          thickness: '5px',
+          transition: {
+            speed: '1s',
+            opacity: '0.8s',
+            termination: 100
+          },
+          autoRevert: true,
+          location: 'top',
+          inverse: false
+        });
+
         const vm = new Vue({
           el: '#app',
           data: {
@@ -197,6 +213,11 @@
               setFavicon(this.unread);
             },
             setBusy(isBusy) {
+              if (isBusy) {
+                this.$Progress.start();
+              } else {
+                this.$Progress.finish();
+              }
               this.isBusy = isBusy;
               document.body.style.cursor = isBusy ? "wait" : "";
               this.setPageTitle();