Add progressbar for wishlist products

src/assets/css/wishlists.css

@@ -0,0 +1,6 @@
+/**
+ * Progress
+ */
+.ui.progress {
+    display: none;
+}

src/assets/js/wishlists.js

@@ -33,10 +33,15 @@ $(function () {
     /**
      * Selection
      */
+    var progress = $('.ui.progress');
+
     $(document).on('change', '.ui.dropdown.wishlists', function () {
         var wishlistValue = $('.ui.dropdown.wishlists').dropdown('get value');
         var wishlistIndex = $('.ui.dropdown.wishlists select').prop('selectedIndex') - 1;
 
+        progress.progress('reset');
+        progress.addClass('indeterminate');
+
         $('[name="wishlist_delete_id"]').val(wishlistValue);
 
         if (wishlistValue) {
@@ -66,6 +71,18 @@ $(function () {
         /**
          * Generate cache
          */
+        var cards = $('.ui.card[data-cache="false"]');
+
+        if (cards.length > 0) {
+            progress.slideDown();
+            progress.removeClass('indeterminate');
+            progress.progress({
+                total: cards.length
+            });
+        } else {
+            progress.slideUp();
+        }
+
         var timerInterval = 1200;
         var timerCache = setTimeout(
             function generateCacheCards() {
@@ -194,6 +211,7 @@ $(function () {
                  * Finish
                  */
                 card.removeClass('loading');
+                progress.progress('increment');
             }
 
             refresh.removeClass('working');

src/pages/wishlists.php

@@ -68,6 +68,12 @@ $page->navigation();
 
         <h2 class="ui header">Products</h2>
 
+        <div class="ui primary progress">
+            <div class="bar">
+                <div class="progress"></div>
+            </div>
+        </div>
+
         <div class="wishlist-cards"></div>
     </div>
 </main>