add spinner on load

public/core/app.js

@@ -10,6 +10,7 @@ import { Helpers } from '/core/helpers.js';
 import { VWF } from '/core/vwf.js';
 import { WorldApp } from '/web/world-app.js';
 import { Widgets } from '/lib/ui/widgets.js';
+import {Spinner} from '/lib/ui/spinjs/spin.js';
 
 import { createAdapter } from '/lib/fun/@most/adapter/dist/index.mjs';
 import *  as mostSubject from '/lib/fun/@most/subject/dist/index.all.js';
@@ -29,8 +30,9 @@ class App {
     M.scheduler = mostScheduler;
     M.prelude = mostPrelude;
     M.e = mostDomEvent;
+    
     ///
-
+    this.setupLoadScreen();
     window._noty = new Noty;
     this.helpers = new Helpers;
     this.log = this.helpers.log;
@@ -61,6 +63,8 @@ class App {
         this.setPageRoutes();
       });
 
+
+
   }
 
   setPageRoutes() {
@@ -195,6 +199,36 @@ class App {
 
   }
 
+  setupLoadScreen(){
+
+    let opts = {
+      lines: 13,
+      length: 28,
+      width: 14,
+      radius: 42,
+      scale: 1,
+      corners: 1,
+      color: '#CCC',
+      opacity: 0.25,
+      rotate: 0,
+      direction: 1,
+      speed: 1,
+      trail: 60,
+      fps: 20,
+      zIndex: 2e9,
+      className: 'spinner',
+      top: '50%',
+      left: '50%',
+      shadow: false,
+      hwaccel: false,
+      position: 'absolute',
+     }
+
+    let el = document.getElementById('loadscreen');
+    this.spinner = new Spinner(opts).spin(el);
+
+  }
+
   initUser() {
 
     function recall() {
@@ -453,11 +487,12 @@ class App {
 
   HandleDebugIndex() {
 
-    window._app.hideProgressBar();
+
     //window._app.hideUIControl();
 
     _app.generalIndex().then(r=>{
 
+    _app.hideProgressBar();   
     let el = document.createElement("div");
     el.setAttribute("id", "appGUI");
     document.body.appendChild(el);
@@ -1249,7 +1284,7 @@ class App {
     _app.generalIndex().then(res=>{
       if (!_app.indexApp) {
         _app.indexApp = new IndexApp('index');
-        window._app.hideProgressBar();
+        _app.hideProgressBar();
       }
     })
 
@@ -1760,34 +1795,14 @@ class App {
 
 
   hideProgressBar() {
-
-    NProgress.done();
-    NProgress.remove();
-    //TODO:
-
-    // var progressbar = document.getElementById("load-progressbar");
-    // if (progressbar) {
-    //   progressbar.classList.remove("visible");
-    //   progressbar.classList.remove("mdc-linear-progress--indeterminate");
-
-    //   progressbar.classList.add("not-visible");
-    //   progressbar.classList.add("mdc-linear-progress--closed");
-
-    // }
-
+    let el = document.getElementById('loadscreen');
+    el.getElementsByClassName('spinner')[0].remove();
+    //window._spinner.stop(false);
   }
 
   showProgressBar() {
-
-    //TODO:
-    // let progressbar = document.getElementById("load-progressbar");
-    // if (progressbar) {
-    //   progressbar.classList.remove("not-visible");
-    //   progressbar.classList.remove("mdc-linear-progress--closed");
-
-    //   progressbar.classList.add("visible");
-    //   progressbar.classList.add("mdc-linear-progress--indeterminate");
-    // }
+    let el = document.getElementById('loadscreen');
+    _app.spinner.spin(el);
 
   }
 

public/core/vwf.js

@@ -3087,23 +3087,7 @@ class VWF {
 
                                 // Dismiss the loading spinner
                                 if (childID === self.application()) {
-
-                                    NProgress.done();
-                                    NProgress.remove();
-
-                                    //TODO: "LOADING SPINNER"
-
-                                    // var progressbar = document.getElementById("load-progressbar");
-                                    // if (progressbar) {
-                                    //     //document.querySelector('body').removeChild(progressbar);
-                                    //     progressbar.classList.remove("visible");
-                                    //     progressbar.classList.add("not-visible");
-                                    //     progressbar.classList.add("mdc-linear-progress--closed");
-
-                                    // }
-                                    
-                                    // var spinner = document.getElementById( "vwf-loading-spinner" );
-                                    // spinner && spinner.classList.remove( "pace-active" );
+                                    _app.hideProgressBar();
                                 }
 
                                 series_callback_async(err, undefined);

public/index.css

@@ -96,9 +96,7 @@ body {
  }
 
  .loader {
-  z-index: 10;
-  position: absolute;
-  top: 0px;
+  display: block;
  }
 
  .visible {

public/index.html

@@ -23,5 +23,6 @@ Copyright (c) 2014-2020 Nikolai Suslov and the Krestianstvo.org project contribu
 </head>
 <body>
 <div id="root"></div>
+<div id="loadscreen" class="loader"></div>
 </body>
 </html>

public/index.js

@@ -4,8 +4,7 @@ loadjs([
     '/lib/ui/noty/noty.css',
     '/lib/ui/noty/themes/mint.css',
     '/lib/ui/noty/noty.js',
-    '/lib/ui/nprogress/nprogress.css',
-    '/lib/ui/nprogress/nprogress.js',
+    '/lib/ui/spinjs/spin.css'
 ],'sys', {
     async: false
 });
@@ -58,9 +57,6 @@ loadjs(['/lib/gundb/gun.min.js',
 
 
 loadjs.ready(['sys', 'fun', 'forall'], function() {
-    document.addEventListener('DOMContentLoaded', function(){
-        NProgress.start();
-    })
     }).ready('gundb', function() {
         import('/core/app.js')
             .then((module) => {

public/lib/ui/spinjs/spin.css

@@ -0,0 +1,38 @@
+@keyframes spinner-line-fade-more {
+  0%, 100% {
+    opacity: 0; /* minimum opacity */
+  }
+  1% {
+    opacity: 1;
+  }
+}
+
+@keyframes spinner-line-fade-quick {
+  0%, 39%, 100% {
+    opacity: 0.25; /* minimum opacity */
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes spinner-line-fade-default {
+  0%, 100% {
+    opacity: 0.22; /* minimum opacity */
+  }
+  1% {
+    opacity: 1;
+  }
+}
+
+@keyframes spinner-line-shrink {
+  0%, 25%, 100% {
+    /* minimum scale and opacity */
+    transform: scale(0.5);
+    opacity: 0.25;
+  }
+  26% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

public/lib/ui/spinjs/spin.js

@@ -0,0 +1,190 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var defaults = {
+    lines: 12,
+    length: 7,
+    width: 5,
+    radius: 10,
+    scale: 1.0,
+    corners: 1,
+    color: '#000',
+    fadeColor: 'transparent',
+    animation: 'spinner-line-fade-default',
+    rotate: 0,
+    direction: 1,
+    speed: 1,
+    zIndex: 2e9,
+    className: 'spinner',
+    top: '50%',
+    left: '50%',
+    shadow: '0 0 1px transparent',
+    position: 'absolute',
+};
+var Spinner = /** @class */ (function () {
+    function Spinner(opts) {
+        if (opts === void 0) { opts = {}; }
+        this.opts = __assign(__assign({}, defaults), opts);
+    }
+    /**
+     * Adds the spinner to the given target element. If this instance is already
+     * spinning, it is automatically removed from its previous target by calling
+     * stop() internally.
+     */
+    Spinner.prototype.spin = function (target) {
+        this.stop();
+        this.el = document.createElement('div');
+        this.el.className = this.opts.className;
+        this.el.setAttribute('role', 'progressbar');
+        css(this.el, {
+            position: this.opts.position,
+            width: 0,
+            zIndex: this.opts.zIndex,
+            left: this.opts.left,
+            top: this.opts.top,
+            transform: "scale(" + this.opts.scale + ")",
+        });
+        if (target) {
+            target.insertBefore(this.el, target.firstChild || null);
+        }
+        drawLines(this.el, this.opts);
+        return this;
+    };
+    /**
+     * Stops and removes the Spinner.
+     * Stopped spinners may be reused by calling spin() again.
+     */
+    Spinner.prototype.stop = function () {
+        if (this.el) {
+            if (typeof requestAnimationFrame !== 'undefined') {
+                cancelAnimationFrame(this.animateId);
+            }
+            else {
+                clearTimeout(this.animateId);
+            }
+            if (this.el.parentNode) {
+                this.el.parentNode.removeChild(this.el);
+            }
+            this.el = undefined;
+        }
+        return this;
+    };
+    return Spinner;
+}());
+export { Spinner };
+/**
+ * Sets multiple style properties at once.
+ */
+function css(el, props) {
+    for (var prop in props) {
+        el.style[prop] = props[prop];
+    }
+    return el;
+}
+/**
+ * Returns the line color from the given string or array.
+ */
+function getColor(color, idx) {
+    return typeof color == 'string' ? color : color[idx % color.length];
+}
+/**
+ * Internal method that draws the individual lines.
+ */
+function drawLines(el, opts) {
+    var borderRadius = (Math.round(opts.corners * opts.width * 500) / 1000) + 'px';
+    var shadow = 'none';
+    if (opts.shadow === true) {
+        shadow = '0 2px 4px #000'; // default shadow
+    }
+    else if (typeof opts.shadow === 'string') {
+        shadow = opts.shadow;
+    }
+    var shadows = parseBoxShadow(shadow);
+    for (var i = 0; i < opts.lines; i++) {
+        var degrees = ~~(360 / opts.lines * i + opts.rotate);
+        var backgroundLine = css(document.createElement('div'), {
+            position: 'absolute',
+            top: -opts.width / 2 + "px",
+            width: (opts.length + opts.width) + 'px',
+            height: opts.width + 'px',
+            background: getColor(opts.fadeColor, i),
+            borderRadius: borderRadius,
+            transformOrigin: 'left',
+            transform: "rotate(" + degrees + "deg) translateX(" + opts.radius + "px)",
+        });
+        var delay = i * opts.direction / opts.lines / opts.speed;
+        delay -= 1 / opts.speed; // so initial animation state will include trail
+        var line = css(document.createElement('div'), {
+            width: '100%',
+            height: '100%',
+            background: getColor(opts.color, i),
+            borderRadius: borderRadius,
+            boxShadow: normalizeShadow(shadows, degrees),
+            animation: 1 / opts.speed + "s linear " + delay + "s infinite " + opts.animation,
+        });
+        backgroundLine.appendChild(line);
+        el.appendChild(backgroundLine);
+    }
+}
+function parseBoxShadow(boxShadow) {
+    var regex = /^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/;
+    var shadows = [];
+    for (var _i = 0, _a = boxShadow.split(','); _i < _a.length; _i++) {
+        var shadow = _a[_i];
+        var matches = shadow.match(regex);
+        if (matches === null) {
+            continue; // invalid syntax
+        }
+        var x = +matches[2];
+        var y = +matches[5];
+        var xUnits = matches[4];
+        var yUnits = matches[7];
+        if (x === 0 && !xUnits) {
+            xUnits = yUnits;
+        }
+        if (y === 0 && !yUnits) {
+            yUnits = xUnits;
+        }
+        if (xUnits !== yUnits) {
+            continue; // units must match to use as coordinates
+        }
+        shadows.push({
+            prefix: matches[1] || '',
+            x: x,
+            y: y,
+            xUnits: xUnits,
+            yUnits: yUnits,
+            end: matches[8],
+        });
+    }
+    return shadows;
+}
+/**
+ * Modify box-shadow x/y offsets to counteract rotation
+ */
+function normalizeShadow(shadows, degrees) {
+    var normalized = [];
+    for (var _i = 0, shadows_1 = shadows; _i < shadows_1.length; _i++) {
+        var shadow = shadows_1[_i];
+        var xy = convertOffset(shadow.x, shadow.y, degrees);
+        normalized.push(shadow.prefix + xy[0] + shadow.xUnits + ' ' + xy[1] + shadow.yUnits + shadow.end);
+    }
+    return normalized.join(', ');
+}
+function convertOffset(x, y, degrees) {
+    var radians = degrees * Math.PI / 180;
+    var sin = Math.sin(radians);
+    var cos = Math.cos(radians);
+    return [
+        Math.round((x * cos + y * sin) * 1000) / 1000,
+        Math.round((-x * sin + y * cos) * 1000) / 1000,
+    ];
+}