Better loading UI

This commit is contained in:
Douglas Barone 2022-04-14 10:46:53 -04:00
parent 264639dc6e
commit d9c46ebd6d
3 changed files with 49 additions and 1 deletions

View File

@ -75,6 +75,15 @@
</v-scale-transition> </v-scale-transition>
</div> </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-fade-transition
v-if="!$apollo.queries.userPresence.loading || pagedUserPresences.length" v-if="!$apollo.queries.userPresence.loading || pagedUserPresences.length"
class="layout row row--dense wrap" class="layout row row--dense wrap"

View File

@ -36,12 +36,32 @@
</v-chip> </v-chip>
no total. no total.
</div> </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 <v-data-iterator
:items="computedWifiDevices" :items="computedWifiDevices"
:items-per-page.sync="itemsPerPage" :items-per-page.sync="itemsPerPage"
:page="page" :page="page"
:loading="$apollo.queries.wifiDevices.loading" :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 }"> <template #default="{ items }">
<v-expansion-panels multiple> <v-expansion-panels multiple>
<v-expansion-panel v-for="device in items" :key="device.mac"> <v-expansion-panel v-for="device in items" :key="device.mac">

View File

@ -35,10 +35,29 @@
{{ stats.totalUsers }} {{ stats.totalUsers }}
</v-chip> </v-chip>
</div> </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 <v-data-iterator
:items="sortedWifiUsers"
:loading="$apollo.queries.wifiUsers.loading" :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 }"> <template #default="{ items }">
<v-expansion-panels> <v-expansion-panels>
<v-expansion-panel v-for="user in items" :key="user.sAMAccountName"> <v-expansion-panel v-for="user in items" :key="user.sAMAccountName">