From 127078a5063afaef08dcf663ea945ece18c53647 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Fri, 18 Dec 2020 09:40:19 -0400
Subject: [PATCH] Addes progress bar as loader

---
 web/src/views/UserPresence.vue | 154 +++++++++++++++++----------------
 1 file changed, 78 insertions(+), 76 deletions(-)

diff --git a/web/src/views/UserPresence.vue b/web/src/views/UserPresence.vue
index d4f2755..c4c82cf 100644
--- a/web/src/views/UserPresence.vue
+++ b/web/src/views/UserPresence.vue
@@ -18,7 +18,7 @@
         style="max-width: 512px"
       >
         <v-progress-circular
-          v-if="$apollo.queries.userPresence.loading"
+          v-if="$apollo.queries.userPresence.loading && search"
           slot="prepend"
           color="grey"
           class="pa-0 ma-0"
@@ -28,6 +28,10 @@
         />
       </v-text-field>
     </v-toolbar>
+    <v-progress-linear
+      height="2"
+      :indeterminate="$apollo.queries.userPresence.loading"
+    />
     <v-container fluid class="mb-12">
       <div v-if="stats" class="text-center my-4">
         <span>
@@ -50,90 +54,88 @@
         </v-scale-transition>
       </div>
 
-      <div
+      <v-fade-transition
         v-if="
           !$apollo.queries.userPresence.loading || pagedUserPresences.length
         "
+        class="layout row row--dense wrap"
+        group
       >
-        <v-fade-transition class="layout row row--dense wrap" group>
-          <v-col
-            v-for="userPresence in pagedUserPresences"
-            :key="userPresence.id"
-            cols="12"
-            sm="6"
-            md="4"
-            lg="3"
+        <v-col
+          v-for="userPresence in pagedUserPresences"
+          :key="userPresence.id"
+          cols="12"
+          sm="6"
+          md="4"
+          lg="3"
+        >
+          <v-card
+            outlined
+            class="border-highlight light-shadow"
+            :class="{
+              online: userPresence.status == 'ONLINE',
+              recent: userPresence.status == 'RECENT'
+            }"
           >
-            <v-card
-              outlined
-              class="border-highlight light-shadow"
-              :class="{
-                online: userPresence.status == 'ONLINE',
-                recent: userPresence.status == 'RECENT'
-              }"
-            >
-              <v-list three-line>
-                <v-list-item>
-                  <v-list-item-avatar size="52px" style="overflow: visible">
-                    <v-badge
-                      :color="color(userPresence.status)"
-                      bottom
-                      offset-x="18px"
-                      offset-y="18px"
-                    >
-                      <Avatar :src="userPresence.thumbnailPhoto" size="52px" />
-                    </v-badge>
-                  </v-list-item-avatar>
+            <v-list three-line>
+              <v-list-item>
+                <v-list-item-avatar size="52px" style="overflow: visible">
+                  <v-badge
+                    :color="color(userPresence.status)"
+                    bottom
+                    offset-x="18px"
+                    offset-y="18px"
+                  >
+                    <Avatar :src="userPresence.thumbnailPhoto" size="52px" />
+                  </v-badge>
+                </v-list-item-avatar>
 
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ userPresence.displayName }}
-                    </v-list-item-title>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ userPresence.displayName }}
+                  </v-list-item-title>
 
-                    <template v-if="userPresence.status == 'ONLINE'">
-                      <v-list-item-subtitle>
-                        <span class="font-weight-medium">On-line</span>
-                      </v-list-item-subtitle>
-                      <v-list-item-subtitle>
-                        Próximo ao AP
-                        <span class="font-weight-medium">
-                          {{ userPresence.apName }}
-                        </span>
-                      </v-list-item-subtitle>
-                    </template>
+                  <template v-if="userPresence.status == 'ONLINE'">
+                    <v-list-item-subtitle>
+                      <span class="font-weight-medium">On-line</span>
+                    </v-list-item-subtitle>
+                    <v-list-item-subtitle>
+                      Próximo ao AP
+                      <span class="font-weight-medium">
+                        {{ userPresence.apName }}
+                      </span>
+                    </v-list-item-subtitle>
+                  </template>
 
-                    <template v-if="userPresence.status == 'RECENT'">
-                      <v-list-item-subtitle>
-                        <span class="font-weight-medium"
-                          >Visto recentemente</span
-                        >
-                      </v-list-item-subtitle>
-                      <v-list-item-subtitle>
-                        Próximo ao AP
-                        <span class="font-weight-medium">
-                          {{ userPresence.apName }}
-                        </span>
-                      </v-list-item-subtitle>
-                    </template>
+                  <template v-if="userPresence.status == 'RECENT'">
+                    <v-list-item-subtitle>
+                      <span class="font-weight-medium">Visto recentemente</span>
+                    </v-list-item-subtitle>
+                    <v-list-item-subtitle>
+                      Próximo ao AP
+                      <span class="font-weight-medium">
+                        {{ userPresence.apName }}
+                      </span>
+                    </v-list-item-subtitle>
+                  </template>
 
-                    <template v-if="userPresence.status == 'OFFLINE'">
-                      <v-list-item-subtitle>
-                        <span class="font-weight-medium">Off-line</span>
-                      </v-list-item-subtitle>
-                      <v-list-item-subtitle>
-                        <span class="font-weight-medium">
-                          Visto
-                          {{ userPresence.lastSeen | from }}
-                        </span>
-                      </v-list-item-subtitle>
-                    </template>
-                  </v-list-item-content>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-col>
-        </v-fade-transition>
-      </div>
+                  <template v-if="userPresence.status == 'OFFLINE'">
+                    <v-list-item-subtitle>
+                      <span class="font-weight-medium">Off-line</span>
+                    </v-list-item-subtitle>
+                    <v-list-item-subtitle>
+                      <span class="font-weight-medium">
+                        Visto
+                        {{ userPresence.lastSeen | from }}
+                      </span>
+                    </v-list-item-subtitle>
+                  </template>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-col>
+      </v-fade-transition>
 
       <div v-else>
         <div class="layout row row--dense wrap">