#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;
|
--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');
|
||||||
}
|
}
|
|
@ -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
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>
|
</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");
|
||||||
|
|
Loading…
Reference in a new issue