add loading animation

demo/index.html

@@ -14,9 +14,7 @@
       </form>
     </nav>
 
-    <redoc scroll-y-offset="body > nav" spec-url='swagger.json'>
+    <redoc scroll-y-offset="body > nav" spec-url='rebilly.json'></redoc>
-      Loading...
-    </redoc>
 
     <!-- ReDoc built file with all dependencies included -->
     <script src="dist/redoc.full.js"> </script>

demo/main.css

@@ -80,6 +80,7 @@ nav {
   position: fixed;
   top: 0;
   z-index: 1;
+  box-sizing: border-box;
 }
 
 @media (min-width: 1000px) {

demo/main.js

@@ -4,7 +4,8 @@
   var schemaUrlForm = document.getElementById('schema-url-form');
   var schemaUrlInput = document.getElementById('schema-url-input');
   schemaUrlForm.addEventListener('submit', function(event) {
+    event.preventDefault();
     Redoc.init(schemaUrlInput.value);
-    event.preventDefault(); 
+    return false;
   })
 })();

lib/components/Redoc/redoc.js

@@ -20,6 +20,8 @@ import {isFunction} from 'angular2/src/facade/lang';
 
 let optionNames = new Set(['scrollYOffset']);
 
+let dom = new BrowserDomAdapter();
+
 @RedocComponent({
   selector: 'redoc',
   providers: [SchemaManager, BrowserDomAdapter, OptionsManager],
@@ -81,10 +83,58 @@ export default class Redoc extends BaseComponent {
     }
   }
 
+  static showLoadingAnimation() {
+    if (!dom.query('#redoc-loading-style')) {
+      let animStyle = dom.createStyleElement(`
+        redoc.loading {
+          position: relative;
+          display: block;
+          min-height:350px;
+        }
+
+        redoc.loading:before {
+          content: "Loading...";
+          font-size: 28px;
+          text-align: center;
+          padding-top: 40px;
+          color: #3F5C9C;
+          font-weight: bold;
+          display: block;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background-color: white;
+          z-index: 9999;
+          opacity: 1;
+          transition: all 0.6s ease-out;
+        }
+
+        redoc.loading-remove:before {
+          opacity: 0;
+        }
+      `);
+      animStyle.id = 'redoc-loading-style';
+      dom.appendChild(dom.defaultDoc().head, animStyle);
+    }
+    dom.addClass(dom.query('redoc'), 'loading');
+  }
+
+  static hideLoadingAnimation() {
+    let redocEl = dom.query('redoc');
+    dom.addClass(redocEl, 'loading-remove');
+    setTimeout(() => {
+      dom.removeClass(redocEl, 'loading-remove');
+      dom.removeClass(redocEl, 'loading');
+    }, 400);
+  }
+
   static init(schemaUrl, options) {
     if (Redoc.appRef) {
       Redoc.dispose();
     }
+    Redoc.showLoadingAnimation();
     return SchemaManager.instance().load(schemaUrl)
     .then(() => {
       (new OptionsManager()).options = options;
@@ -92,6 +142,7 @@ export default class Redoc extends BaseComponent {
     })
     .then(
       (appRef) => {
+        Redoc.hideLoadingAnimation();
         Redoc.appRef = appRef;
         redocEvents.bootstrapped.next();
         console.log('ReDoc bootstrapped!');