Add loading feedback while the inspector library is fetched over the network

Author: dmarcos

src/components/scene/inspector.js

@@ -12,12 +12,35 @@ module.exports.Component = registerComponent('inspector', {
   },
 
   init: function () {
+    this.loadingMessage = 'Loading Inspector';
     this.onKeydown = bind(this.onKeydown, this);
     this.onMessage = bind(this.onMessage, this);
+    this.initOverlay();
     window.addEventListener('keydown', this.onKeydown);
     window.addEventListener('message', this.onMessage);
   },
 
+  initOverlay: function () {
+    this.overlayEl = document.createElement('div');
+    this.overlayEl.style.backgroundColor = '#222';
+    this.overlayEl.style.opacity = '0.90';
+    this.overlayEl.style.position = 'absolute';
+    this.overlayEl.style.width = '800px';
+    this.overlayEl.style.height = '600px';
+    this.overlayEl.style.textAlign = 'left';
+
+    this.loadingMessageEl = document.createElement('div');
+    this.loadingMessageEl.innerHTML = this.loadingMessage;
+    this.loadingMessageEl.style.position = 'relative';
+    this.loadingMessageEl.style.color = 'white';
+    this.loadingMessageEl.style.width = '130px';
+    this.loadingMessageEl.style.opacity = '1.0';
+    this.loadingMessageEl.style.height = '20px';
+    this.loadingMessageEl.style.left = 'calc(50% - 65px)';
+    this.loadingMessageEl.style.top = 'calc(50% - 10px)';
+    this.overlayEl.appendChild(this.loadingMessageEl);
+  },
+
   remove: function () {
     this.removeEventListeners();
   },
@@ -31,6 +54,50 @@ module.exports.Component = registerComponent('inspector', {
     this.injectInspector();
   },
 
+  showLoader: function () {
+    var computedStyle = window.getComputedStyle(this.el);
+    var overlayEl = this.overlayEl;
+    overlayEl.style.width = computedStyle.width;
+    overlayEl.style.height = computedStyle.height;
+    this.el.appendChild(this.overlayEl);
+    this.tick = this.animate;
+    this.el.addBehavior(this);
+  },
+
+  hideLoader: function () {
+    this.el.removeChild(this.overlayEl);
+    this.tick = undefined;
+    this.el.removeBehavior(this);
+  },
+
+  animate: (function () {
+    var step = 0;
+    return function () {
+      var message = this.loadingMessage;
+      var loadingMessageEl = this.loadingMessageEl;
+      if (this.overlayEl.parentElement === null) { return; }
+      step++;
+      if (step === 100) {
+        step = 0;
+        loadingMessageEl.innerHTML = message + '';
+        return;
+      }
+      if (step === 25) {
+        this.loadingMessageEl.innerHTML = message + '.';
+        return;
+      }
+      if (step === 50) {
+        this.loadingMessageEl.innerHTML = message + '..';
+        return;
+      }
+      if (step === 75) {
+        this.loadingMessageEl.innerHTML = message + '...';
+        return;
+      }
+      console.log(step);
+    };
+  })(),
+
   /**
    * postMessage. aframe.io uses this to create a button on examples to open Inspector.
    */
@@ -44,13 +111,16 @@ module.exports.Component = registerComponent('inspector', {
 
     if (AFRAME.INSPECTOR || AFRAME.inspectorInjected) { return; }
 
+    this.showLoader();
+
     // Inject.
     script = document.createElement('script');
     script.src = this.data.url;
     script.setAttribute('data-name', 'aframe-inspector');
     script.setAttribute(AFRAME_INJECTED, '');
     script.onload = function () {
       AFRAME.INSPECTOR.open();
+      self.hideLoader();
       self.removeEventListeners();
     };
     document.head.appendChild(script);