Put nanobar back

CHANGELOG.md

@@ -16,6 +16,7 @@
 - Clean up conditional logic in a couple component templates [#1547](https://github.com/bigcommerce/cornerstone/pull/1547)
 - Remove "demo" product conditional logic [#1551](https://github.com/bigcommerce/cornerstone/pull/1551)
 - Add responsive breakpoints to product carousel. [#1458](https://github.com/bigcommerce/cornerstone/pull/1458)
+- Add nanobar back to fix tests
 
 ## 3.5.1 (2019-06-24)
 - Fix conditional logic in share.html [#1522](https://github.com/bigcommerce/cornerstone/pull/1522)

assets/js/theme/global.js

@@ -11,6 +11,7 @@ import cartPreview from './global/cart-preview';
 import privacyCookieNotification from './global/cookieNotification';
 import maintenanceMode from './global/maintenanceMode';
 import carousel from './common/carousel';
+import loadingProgressBar from './global/loading-progress-bar';
 import svgInjector from './global/svg-injector';
 
 export default class Global extends PageManager {
@@ -25,6 +26,7 @@ export default class Global extends PageManager {
         mobileMenuToggle();
         privacyCookieNotification();
         maintenanceMode(this.context.maintenanceMode);
+        loadingProgressBar();
         svgInjector();
     }
 }

assets/js/theme/global/loading-progress-bar.js

@@ -0,0 +1,41 @@
+import Nanobar from 'nanobar';
+
+export default function () {
+    // Create the nanobar instance
+    const nanobar = new Nanobar();
+
+    // Timer for moving progress bar during ajax calls
+    let timer = null;
+    let current = 0;
+
+    function clearTimer() {
+        if (timer) {
+            clearInterval(timer);
+            timer = null;
+        }
+    }
+
+    function setTimer() {
+        clearTimer();
+
+        current = 0;
+        timer = setInterval(() => {
+            current += 3;
+            if (current <= 100) {
+                nanobar.go(current);
+            } else {
+                clearTimer();
+            }
+        }, 50);
+    }
+
+    // Attach global jquery handlers to listen for ajax start
+    $(document).ajaxSend(() => {
+        setTimer();
+    });
+
+    $(document).ajaxComplete(() => {
+        nanobar.go(100);
+        clearTimer();
+    });
+}

assets/scss/components/_components.scss

@@ -9,6 +9,9 @@
 // Slick carousel
 @import "vendor/slick/component";
 
+// Nanobar Ajax loading progress bar
+@import "vendor/nanobar/component";
+
 // SweetAlert2 replacement for JavaScript alert/confirmations
 @import "vendor/sweetalert2/component";
 

assets/scss/components/vendor/nanobar/_component.scss

@@ -0,0 +1,5 @@
+// =============================================================================
+// NANOBAR - AJAX LOADING PROGRESS
+// =============================================================================
+
+@import "nanobar";

assets/scss/components/vendor/nanobar/_nanobar.scss

@@ -0,0 +1,20 @@
+// =============================================================================
+// NANOBAR - AJAX LOADING PROGRESS
+// =============================================================================
+
+.nanobar {
+    display: none;
+    width: 100%;
+    height: remCalc(5px);
+    z-index: 9999;
+    top: 0;
+    pointer-events: none;
+    user-select: none;
+
+    .bar {
+        width: 0;
+        height: 100%;
+        transition: height .1s;
+        background-color: stencilColor("pace-progress-backgroundColor");
+    }
+}

package.json

@@ -15,6 +15,7 @@
     "jstree": "vakata/jstree",
     "lazysizes": "5.1.0",
     "lodash": "^4.17.4",
+    "nanobar": "^0.4.2",
     "nod-validate": "^2.0.12",
     "slick-carousel": "^1.8.1",
     "svg-injector": "^1.1.3",

webpack.common.js

@@ -68,6 +68,7 @@ module.exports = {
             jquery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js'),
             jstree: path.resolve(__dirname, 'node_modules/jstree/dist/jstree.min.js'),
             lazysizes: path.resolve(__dirname, 'node_modules/lazysizes/lazysizes.min.js'),
+            nanobar: path.resolve(__dirname, 'node_modules/nanobar/nanobar.min.js'),
             'slick-carousel': path.resolve(__dirname, 'node_modules/slick-carousel/slick/slick.min.js'),
             'svg-injector': path.resolve(__dirname, 'node_modules/svg-injector/dist/svg-injector.min.js'),
             sweetalert2: path.resolve(__dirname, 'node_modules/sweetalert2/dist/sweetalert2.min.js'),