title: react, meteor, webpack, es6. How to create a loading/splash screen
body: <p>I am using a build for react, es6 modules and meteor with webpack.  These techs take a while to load all their stuff, before something shows up on the page.  How can I with this stack show a pre-loader / splash screen while all this loads up?</p>
  
  <p>my webpack file:</p>
  
  <pre><code>var autoprefixer = require('autoprefixer');
  
  module.exports = {
      entry: [
          'babel-polyfill',
          './entry'
      ],
      resolve: {
          extensions: ['', '.js', '.jsx', '.json','css','scss']
      },
      devtool: 'eval',
      module: {
          loaders: [
              {
                  test: /\.jsx?$/,
                  loader: 'babel',
                  exclude: /node_modules/,
                  query: {
                      plugins:['transform-runtime'],
                      presets:['es2015','stage-0','react']
                  }
              },
              {
                  test: /\.scss$/,
                  loader:  'style-loader!css-loader!sass-loader!postcss-loader'
              },
              {
                  test: /\.(jpe?g|png|gif|svg)$/i,
                  loaders: [
                      'url?limit=8192',
                      'img-loader'
                  ]
              },
          ]
      },
      postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
  };
  </code></pre>
  
  <p>My entry.js file:</p>
  
  <pre><code>import '../store.js';
  import './../lib/routes.jsx';
  </code></pre>
  
  <p>My routes.jsx file:</p>
  
  <pre><code>import React from 'react';
  import {FlowRouter} from 'meteor/kadira:flow-router';
  import {mount} from 'react-mounter';
  import $ from 'jquery';
  import store from '../store.js';
  import {Provider} from 'react-redux';
  
  import App from '../client/components/app/app.jsx';
  import HomePage from '../client/components/pages/home/homePage.jsx';
  import AboutPage from '../client/components/pages/about/aboutPage.jsx';
  import BlogPage from '../client/components/pages/blog/blogPage.jsx';
  import BlogPostPage from '../client/components/pages/blogPost/blogPostPage.jsx';
  
  FlowRouter.route('/', {
      name:"home",
      action() {
          mount(App, {page: &lt;Provider store={store}&gt;&lt;HomePage /&gt;&lt;/Provider&gt;});
      }
  });
  FlowRouter.route('/about', {
      name:"about",
      action() {
          mount(App, {page: &lt;Provider store={store}&gt;&lt;AboutPage /&gt;&lt;/Provider&gt;});
      }
  });
  FlowRouter.route('/blog', {
      name:"blog",
      action() {
          mount(App, {page: &lt;Provider store={store}&gt;&lt;BlogPage /&gt;&lt;/Provider&gt;});
      }
  });
  FlowRouter.route('/blog/:slug', {
      name:"blog post",
      action(params) {
          console.log(params);
          mount(App, {page: &lt;Provider store={store}&gt;&lt;BlogPostPage slug={params.slug} /&gt;&lt;/Provider&gt;});
      }
  });
  
  // this is just a work around for a problem I am having with initial rout loading in development mode.
  if (!$('.app-root').length)
      FlowRouter.go(window.location.href.replace(/^http(s)?\:\/\/[^:\/\#]*(\:[^\/\#]*)?\/?/,'/').replace(/\#.*$/,'')+'#'+Math.floor(Math.random()*100000));
  
  let lastPage = FlowRouter.current();
  store.subscribe(()=&gt;{
      let state = store.getState();
      if (!state || state.currentURL != lastPage)
          FlowRouter.go(state.currentURL);
  });
  </code></pre>