#51 - Avoir une animation au chargement de la liste

sass/colors.scss

@@ -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');
 }

sass/index.scss

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

sass/loader.scss

@@ -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;
+  }
+}

views/pages/mon-compte/ma-collection/index.ejs

@@ -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");