From 3bf5b6b4762d7dcd6a62651739fde39c40bc197e Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Sat, 15 May 2021 13:12:46 -0400
Subject: [PATCH] Add a loading spinner before the printers list is populated

---
 src/App.vue | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 8b935ba..a50d70e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,8 @@
 <template>
   <div>
+    <div class="loading" v-show="Object.keys(printers).length === 0">
+      <div class="loading-spinner"></div>
+    </div>
     <PrinterCard
       v-for="(status, name) in printers"
       :key="name"
@@ -54,3 +57,30 @@ export default class App extends Vue {
   }
 }
 </script>
+
+<style>
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 90vh;
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.loading-spinner {
+  display: block;
+  height: 10vh;
+  width: 10vh;
+  border: solid 1vh transparent;
+  border-top-color: #1c87c9;
+  border-radius: 50%;
+  animation: 2s linear infinite spinner;
+}
+</style>