From 8ef54ee81b80c26deef2aff8402febef94fe4840 Mon Sep 17 00:00:00 2001
From: George Lacey <git@george.ooo>
Date: Fri, 8 Apr 2022 10:13:49 +0100
Subject: [PATCH] Add loading spinners

---
 borgweb/borg/templates/borg/index.html | 37 ++++++++++----------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/borgweb/borg/templates/borg/index.html b/borgweb/borg/templates/borg/index.html
index e0b936a..ab99463 100644
--- a/borgweb/borg/templates/borg/index.html
+++ b/borgweb/borg/templates/borg/index.html
@@ -29,7 +29,8 @@
     {% if repo_list %}
         <div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap">
         {% for repo in repo_list %}
-            <div style="width: 600px;" id="repo-{{ repo.label }}" class="repo-container shadow rounded overflow-hidden bg-primary">
+            <div style="width: 600px;" id="repo-{{ repo.label }}"
+                 class="repo-container shadow rounded overflow-hidden bg-primary">
                 <div class="row me-1 overflow-hidden text-truncate">
                     <h2 class="h2"><span class="repo-label">{{ repo.label }}</span>
                         <small class="repo-location text-muted">{{ repo.location }}</small>
@@ -37,26 +38,29 @@
                 </div>
                 <dl class="att-label row ps-3">
                     <dt class="col-4">Latest backup:</dt>
-                    <dd class="repo-latest-backup col-8"></dd>
+                    <dd class="repo-latest-backup col-8">
+                        <div class="spinner-border" role="status">
+                        </div>
+                    </dd>
                 </dl>
                 <dl class="att-label row ps-3">
                     <dt class="col-4">Size:</dt>
-                    <dd class="repo-size col-8"></dd>
+                    <dd class="repo-size col-8">
+                        <div class="spinner-border" role="status">
+                        </div>
+                    </dd>
                 </dl>
                 <dl class="att-label row ps-3">
                     <dt class="col-4">Recent errors:</dt>
-                    <dd class="repo-recent-errors col-8"></dd>
+                    <dd class="repo-recent-errors col-8">
+                        <div class="spinner-border" role="status">
+                        </div>
+                    </dd>
                 </dl>
                 <canvas id="repo-{{ repo.label }}-size-graph" width="400" height="200"></canvas>
                 </dl>
             </div>
         {% endfor %}
-{#        <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
-{#            <canvas id="daily_backup_size" width="400" height="200"></canvas>#}
-{#        </div>#}
-{#        <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
-{#            <canvas id="monthly_backup_size" width="400" height="200"></canvas>#}
-{#        </div>#}
     {% else %}
         <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">
             <div style="width: 600px;" class="repo-container bg-primary overflow-hidden">
@@ -65,18 +69,5 @@
         </div>
     {% endif %}
 </div>
-    {#<div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap">#}
-    {#    <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
-    {#        <canvas id="daily_backup_size" width="400" height="200"></canvas>#}
-    {#    </div>#}
-    {#    <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
-    {#        <canvas id="monthly_backup_size" width="400" height="200"></canvas>#}
-    {#    </div>#}
-    {#    <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">#}
-    {#        <div style="width: 600px;" class="repo-container bg-primary overflow-hidden">#}
-    {#        <h2 class="h2">No repositories found</h2>#}
-    {#    </div>#}
-    {#    </div>#}
-    {#</div>#}
 {% endblock %}