Better loading UI

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"

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">

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">