From d9c46ebd6dd615280826262c6b8f75f4456d4ad0 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Thu, 14 Apr 2022 10:46:53 -0400
Subject: [PATCH] Better loading UI

---
 web/src/views/UserPresence.vue |  9 +++++++++
 web/src/views/WifiDevices.vue  | 20 ++++++++++++++++++++
 web/src/views/WifiUsers.vue    | 21 ++++++++++++++++++++-
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/web/src/views/UserPresence.vue b/web/src/views/UserPresence.vue
index 798f76b..a7c390e 100644
--- a/web/src/views/UserPresence.vue
+++ b/web/src/views/UserPresence.vue
@@ -75,6 +75,15 @@
       </v-scale-transition>
     </div>
 
+    <div v-else class="text-center my-4">
+      <span>
+        <v-chip color="online" class="mr-1" dark>
+          <v-progress-circular indeterminate size="12" width="1" />
+        </v-chip>
+        usuários online.
+      </span>
+    </div>
+
     <v-fade-transition
       v-if="!$apollo.queries.userPresence.loading || pagedUserPresences.length"
       class="layout row row--dense wrap"
diff --git a/web/src/views/WifiDevices.vue b/web/src/views/WifiDevices.vue
index 41f570e..615b4cf 100644
--- a/web/src/views/WifiDevices.vue
+++ b/web/src/views/WifiDevices.vue
@@ -36,12 +36,32 @@
       </v-chip>
       no total.
     </div>
+    <div v-else class="text-center my-4">
+      <v-chip color="primary" class="mr-1" dark>
+        <v-progress-circular indeterminate size="12" width="1" />
+      </v-chip>
+      online de
+      <v-chip class="mx-1">
+        <v-progress-circular indeterminate size="12" width="1" />
+      </v-chip>
+      no total.
+    </div>
+
     <v-data-iterator
       :items="computedWifiDevices"
       :items-per-page.sync="itemsPerPage"
       :page="page"
       :loading="$apollo.queries.wifiDevices.loading"
     >
+      <template #loading>
+        <v-expansion-panels disabled>
+          <v-expansion-panel v-for="i in 10" :key="i">
+            <v-expansion-panel-header class="pa-1">
+              <v-skeleton-loader class="ma-0 pa-0" type="list-item-avatar" />
+            </v-expansion-panel-header>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </template>
       <template #default="{ items }">
         <v-expansion-panels multiple>
           <v-expansion-panel v-for="device in items" :key="device.mac">
diff --git a/web/src/views/WifiUsers.vue b/web/src/views/WifiUsers.vue
index 222aff6..5d123b2 100644
--- a/web/src/views/WifiUsers.vue
+++ b/web/src/views/WifiUsers.vue
@@ -35,10 +35,29 @@
         {{ stats.totalUsers }}
       </v-chip>
     </div>
+    <div v-else class="text-center my-4">
+      <v-chip color="primary" class="mr-2" dark>
+        <v-progress-circular indeterminate size="12" width="1" />
+      </v-chip>
+      usuários online de
+      <v-chip class="ml-2">
+        <v-progress-circular indeterminate size="12" width="1" />
+      </v-chip>
+    </div>
+
     <v-data-iterator
-      :items="sortedWifiUsers"
       :loading="$apollo.queries.wifiUsers.loading"
+      :items="sortedWifiUsers"
     >
+      <template #loading>
+        <v-expansion-panels disabled>
+          <v-expansion-panel v-for="i in 10" :key="i">
+            <v-expansion-panel-header class="pa-1">
+              <v-skeleton-loader class="ma-0 pa-0" type="list-item-avatar" />
+            </v-expansion-panel-header>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </template>
       <template #default="{ items }">
         <v-expansion-panels>
           <v-expansion-panel v-for="user in items" :key="user.sAMAccountName">