#51 - Avoir une animation au chargement de la liste (#54)

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #54
This commit is contained in:
Damien Broqua 2022-08-29 08:13:06 +02:00
parent 080471eb37
commit 1377b4c0c1
6 changed files with 26 additions and 2 deletions

BIN
public/img/loading-dark.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View file

@ -56,6 +56,8 @@ $pagination-hover-color: rgb(115, 151, 186);
--button-link-text-color: #2C364A;
--loader-img: url('/img/loading-light.gif');
--nord0: #{$nord0};
--nord1: #{$nord1};
--nord2: #{$nord2};
@ -94,4 +96,6 @@ $pagination-hover-color: rgb(115, 151, 186);
--border-color: #{$nord1};
--button-link-text-color: #{$white};
--loader-img: url('/img/loading-dark.gif');
}

View file

@ -39,6 +39,7 @@
@import './icons';
@import './list';
@import './box';
@import './loader';
@import './error';
@import './500';

13
sass/loader.scss Normal file
View file

@ -0,0 +1,13 @@
.loader {
display: flex;
flex-direction: column;
align-items: center;
.animation {
background-image: var(--loader-img);
background-repeat: no-repeat;
background-position: center center;
width: 64px;
height: 64px;
}
}

View file

@ -89,6 +89,12 @@
</span>
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
<div class="loader" v-if="loading">
<div class="animation"></div>
<div>
Chargement des données en cours…
</div>
</div>
<div class="item" v-if="!loading" v-for="item in items">
<span class="title">
<a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
@ -226,6 +232,7 @@
methods: {
fetch() {
this.loading = true;
this.total = 0;
let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
@ -247,9 +254,8 @@
axios.get(url)
.then( response => {
this.items = response.data.rows;
this.total = response.data.count;
this.total = response.data.count || 0;
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger votre collection");