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

Merged
dbroqua merged 1 commit from feature/51 into develop 2022-08-29 08:13:07 +02:00
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; --button-link-text-color: #2C364A;
--loader-img: url('/img/loading-light.gif');
--nord0: #{$nord0}; --nord0: #{$nord0};
--nord1: #{$nord1}; --nord1: #{$nord1};
--nord2: #{$nord2}; --nord2: #{$nord2};
@ -94,4 +96,6 @@ $pagination-hover-color: rgb(115, 151, 186);
--border-color: #{$nord1}; --border-color: #{$nord1};
--button-link-text-color: #{$white}; --button-link-text-color: #{$white};
--loader-img: url('/img/loading-dark.gif');
} }

View file

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