Merge pull request #2006 from dmarcos/inspectorLoader

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

Author: fernandojsg

src/components/scene/inspector.js

@@ -5,6 +5,7 @@ var pkg = require('../../../package');
 var registerComponent = require('../../core/component').registerComponent;
 
 var INSPECTOR_URL = pkg.homepage + 'releases/' + pkg.version + '/aframe-inspector.min.js';
+var LOADING_MESSAGE = 'Loading Inspector';
 
 module.exports.Component = registerComponent('inspector', {
   schema: {
@@ -14,10 +15,18 @@ module.exports.Component = registerComponent('inspector', {
   init: function () {
     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 () {
+    var dotsHTML = '<span class="dots"><span>.</span><span>.</span><span>.</span></span>';
+    this.loadingMessageEl = document.createElement('div');
+    this.loadingMessageEl.classList.add('a-inspector-loader');
+    this.loadingMessageEl.innerHTML = LOADING_MESSAGE + dotsHTML;
+  },
+
   remove: function () {
     this.removeEventListeners();
   },
@@ -31,6 +40,14 @@ module.exports.Component = registerComponent('inspector', {
     this.injectInspector();
   },
 
+  showLoader: function () {
+    document.body.appendChild(this.loadingMessageEl);
+  },
+
+  hideLoader: function () {
+    this.el.removeChild(this.loadingMessageEl);
+  },
+
   /**
    * postMessage. aframe.io uses this to create a button on examples to open Inspector.
    */
@@ -44,13 +61,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);

src/style/aframe.css

@@ -58,6 +58,44 @@
   position: fixed !important;
 }
 
+.a-inspector-loader {
+  background-color: #ed3160;
+  position: fixed;
+  left: 3px;
+  top: 3px;
+  padding: 6px 10px;
+  color: #fff;
+  text-decoration: none;
+  font-size: 12px;
+  font-family: Roboto,sans-serif;
+  text-align: center;
+  z-index: 99999;
+  width: 174px;
+}
+
+/* Inspector loader animation */
+@keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
+@keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
+@keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
+@-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
+@-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
+@-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
+
+.a-inspector-loader .dots span {
+  animation: dots-1 2s infinite steps(1);
+  -webkit-animation: dots-1 2s infinite steps(1);
+}
+
+.a-inspector-loader .dots span:first-child + span {
+  animation-name: dots-2;
+  -webkit-animation-name: dots-2;
+}
+
+.a-inspector-loader .dots span:first-child + span + span {
+  animation-name: dots-3;
+  -webkit-animation-name: dots-3;
+}
+
 a-scene {
   display: block;
   position: relative;