Add a loading icon to the columns. Fixes #16

openstate · Mar 10, 2021 · 9c26786 · 9c26786
1 parent 46105e0
commit 9c26786
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/public/global.css b/public/global.css
@@ -229,3 +229,10 @@ h6 {
 #add-column-content input {
 	width: 500px;
 }
+
+.loading {
+	background: url("/images/loading.svg") no-repeat;
+	width: 32px;
+	height: 32px;
+	margin: 0 auto;
+}
diff --git a/public/images/loading.svg b/public/images/loading.svg
diff --git a/src/column/Column.svelte b/src/column/Column.svelte
@@ -32,6 +32,7 @@ let show_marker = false;
 let scroll_marker;
 let virtual_list;
 let show_sources = false;
+let loading = true;
 
 function getLocations() {
   column_locations = $locations.filter((l) => inquiry.locations.includes(l.id));
@@ -139,6 +140,7 @@ onMount(function () {
               }
             });
             items_.set(real_items);
+            loading = false;
           });
       });
       // var entry_idx = $items.length + 10;
@@ -191,6 +193,9 @@ onDestroy(function () {
   </div>
   {/if}
   <div id="column-contents-{column_id}" class="column-contents">
+  {#if loading}
+    <div class="loading"></div>
+  {/if}
   {#if show_marker}
     <Fab on:click={doGoToEntry} extended><Label>Nieuwe entries!</Label></Fab>
   {/if}