Show a loader until groups are fetched

This commit is contained in:
Bubka 2020-11-26 12:59:29 +01:00
parent f6e04fb36c
commit 1292b7bd89

View File

@ -12,18 +12,25 @@
<font-awesome-icon :icon="['fas', 'plus-circle']" /> Create new group <font-awesome-icon :icon="['fas', 'plus-circle']" /> Create new group
</router-link> </router-link>
</div> </div>
<div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile"> <div v-if="groups.length > 0">
{{ group.name }} <div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
<a class="has-text-grey is-pulled-right" @click="deleteGroup(group.id)"> {{ group.name }}
<font-awesome-icon :icon="['fas', 'trash']" /> <a class="has-text-grey is-pulled-right" @click="deleteGroup(group.id)">
</a> <font-awesome-icon :icon="['fas', 'trash']" />
<router-link :to="{ name: 'editGroup', params: { groupId: group.id }}" class="tag is-dark"> </a>
{{ $t('commons.rename') }} <router-link :to="{ name: 'editGroup', params: { groupId: group.id }}" class="tag is-dark">
</router-link> {{ $t('commons.rename') }}
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.count }} {{ $t('twofaccounts.accounts') }}</span> </router-link>
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.count }} {{ $t('twofaccounts.accounts') }}</span>
</div>
<div class="mt-2 is-size-7 is-pulled-right" v-if="groups.length > 0">
{{ $t('groups.deleting_group_does_not_delete_accounts')}}
</div>
</div> </div>
<div class="mt-2 is-size-7 is-pulled-right" v-if="groups.length > 0"> <div v-else class="has-text-centered">
{{ $t('groups.deleting_group_does_not_delete_accounts')}} <span class="is-size-4">
<font-awesome-icon :icon="['fas', 'spinner']" spin />
</span>
</div> </div>
<!-- footer --> <!-- footer -->
<vue-footer :showButtons="true"> <vue-footer :showButtons="true">