restore the loading screen

src/optimize/BaseOptimizer.js

@@ -1,6 +1,6 @@
 let { inherits } = require('util');
 let _ = require('lodash');
-let { join } = require('path');
+let { resolve } = require('path');
 let write = require('fs').writeFileSync;
 let webpack = require('webpack');
 let DirectoryNameAsMain = require('webpack-directory-name-as-main');
@@ -41,6 +41,8 @@ class BaseOptimizer {
         devtoolModuleFilenameTemplate: '[absolute-resource-path]'
       },
 
+      recordsPath: resolve(this.env.workingDir, 'webpack.records'),
+
       plugins: [
         new webpack.ResolverPlugin([
           new DirectoryNameAsMain()

src/optimize/FsOptimizer.js

@@ -38,10 +38,4 @@ module.exports = class FsOptimizer extends BaseOptimizer {
       });
     }
   }
-
-  getConfig() {
-    let config = BaseOptimizer.prototype.getConfig.call(this);
-    config.cache = true;
-    return config;
-  }
 };

src/optimize/lazy/LazyOptimizer.js

@@ -36,12 +36,13 @@ module.exports = class LazyOptimizer extends FsOptimizer {
         if (e.stats && this.current === prom) {
           this.log(['warning', 'optimize'], e.stats.toString({ colors: true }));
         }
+        // TODO: rebuild on errors
         throw e;
       }
     }())
     .then(() => {
       let seconds = ((Date.now() - start) / 1000).toFixed(2);
-      this.log(['info', 'optimize'], `live optimization complete in ${seconds} seconds.`);
+      this.log(['info', 'optimize'], `lazy optimization complete in ${seconds} seconds.`);
     });
 
     return prom;

src/ui/index.js

@@ -2,12 +2,15 @@ module.exports = async (kbnServer, server, config) => {
   let _ = require('lodash');
   let Boom = require('boom');
   let formatUrl = require('url').format;
-  let { join, resolve } = require('path');
+  let { resolve } = require('path');
+  let readFile = require('fs').readFileSync;
 
+  let fromRoot = require('../utils/fromRoot');
   let UiExports = require('./UiExports');
   let UiBundle = require('./UiBundle');
   let UiBundleCollection = require('./UiBundleCollection');
   let UiBundlerEnv = require('./UiBundlerEnv');
+  let loadingGif = readFile(fromRoot('src/ui/public/loading.gif'), { encoding: 'base64'});
 
   let uiExports = kbnServer.uiExports = new UiExports(kbnServer);
 
@@ -35,6 +38,7 @@ module.exports = async (kbnServer, server, config) => {
 
   // render all views from the ui/views directory
   server.setupViews(resolve(__dirname, 'views'));
+  server.exposeStaticFile('/loading.gif', resolve(__dirname, 'public/loading.gif'));
 
   // serve the app switcher
   server.route({
@@ -81,13 +85,14 @@ module.exports = async (kbnServer, server, config) => {
       buildNumber: _.get(kbnServer, 'build.number', '@@buildNum'),
       cacheBust: _.get(kbnServer, 'build.number', ''),
       kbnIndex: config.get('kibana.index'),
-      esShardTimeout: config.get('elasticsearch.shardTimeout')
+      esShardTimeout: config.get('elasticsearch.shardTimeout'),
     };
 
     return this.view(app.templateName, {
       app: app,
       cacheBust: payload.cacheBust,
-      kibanaPayload: payload
+      kibanaPayload: payload,
+      loadingGif: loadingGif,
     });
   });
 };

src/ui/public/chrome/api/angular.js

@@ -37,7 +37,7 @@ module.exports = function (chrome, internals) {
             $app.html(internals.rootTemplate);
           }
 
-          $el.append($content);
+          $el.html($content);
         },
         controllerAs: 'chrome',
         controller: function ($scope, $rootScope, $location, $http) {

src/ui/public/styles/base.less

@@ -395,10 +395,6 @@ textarea {
   resize: vertical;
 }
 
-.initial-load {
-  margin-top: 60px;
-}
-
 .field-collapse-toggle {
   color: #999;
   margin-left: 10px !important;

src/ui/views/uiApp.jade

@@ -1,9 +1,62 @@
 extends ./chrome.jade
 
-block head
-  link(rel='stylesheet', href='/bundles/commons.bundle.js.style.css')
-  link(rel='stylesheet', href='/bundles/#{app.id}.style.css')
-
 block content
-  script(src='/bundles/commons.bundle.js' src-map='/bundles/commons.bundle.js.map')
-  script(src='/bundles/#{app.id}.bundle.js' src-map='/bundles/#{app.id}.bundle.js.map')
+  style.
+    .ui-app-loading {
+      width: 33%;
+      margin: 60px auto;
+      text-align: center;
+      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+      color: #444444;
+      padding-top: 45px;
+      background-size: 145px;
+      background-position: top center;
+      background-repeat: no-repeat;
+      background-image: url('data:image/gif;base64,#{loadingGif}');
+    }
+
+    .ui-app-loading small {
+      font-size: 65%;
+      font-weight: 400;
+      color: #777;
+    }
+
+
+  div.ui-app-loading
+    h1 Kibana
+      small(id="cache-message" style="display:none").
+        Give me a moment here. I'm loading a whole bunch of code. Don't worry, all this good stuff will be cached up for next time!
+
+  script.
+    window.onload = function () {
+
+      var showCacheMessage = !/#.*[?&]embed(&|$)/.test(window.location.href);
+      if (showCacheMessage) document.getElementById('cache-message').style.display = 'block';
+
+      var files = [
+        '/bundles/commons.bundle.js.style.css',
+        '/bundles/#{app.id}.style.css',
+        '/bundles/commons.bundle.js',
+        '/bundles/#{app.id}.bundle.js'
+      ];
+
+      (function next() {
+        var file = files.shift();
+        if (!file) return;
+
+        var type = /\.js$/.test(file) ? 'script' : 'link';
+        var dom = document.createElement(type);
+        dom.setAttribute('async', '');
+
+        if (type === 'script') {
+          dom.setAttribute('src', file);
+          dom.addEventListener('load', next);
+          document.head.appendChild(dom);
+        } else {
+          dom.setAttribute('rel', 'stylesheet');
+          dom.setAttribute('href', file);
+          document.head.appendChild(dom);
+          next();
+        }
+      }());
+    };