#51 - Avoir une animation au chargement de la liste #54
6 changed files with 26 additions and 2 deletions
BIN
public/img/loading-dark.gif
Normal file
BIN
public/img/loading-dark.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 60 KiB |
BIN
public/img/loading-light.gif
Normal file
BIN
public/img/loading-light.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 60 KiB |
|
@ -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');
|
||||
}
|
|
@ -39,6 +39,7 @@
|
|||
@import './icons';
|
||||
@import './list';
|
||||
@import './box';
|
||||
@import './loader';
|
||||
|
||||
@import './error';
|
||||
@import './500';
|
||||
|
|
13
sass/loader.scss
Normal file
13
sass/loader.scss
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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");
|
||||
|
|
Loading…
Reference in a new issue