react, meteor, webpack, es6. How to create a loading/splash screen - meteor

Question

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?
my webpack file:
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'] }) ]
};
My entry.js file:
import '../store.js';
import './../lib/routes.jsx';
My routes.jsx file:
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: <Provider store={store}><HomePage /></Provider>});
}
});
FlowRouter.route('/about', {
name:"about",
action() {
mount(App, {page: <Provider store={store}><AboutPage /></Provider>});
}
});
FlowRouter.route('/blog', {
name:"blog",
action() {
mount(App, {page: <Provider store={store}><BlogPage /></Provider>});
}
});
FlowRouter.route('/blog/:slug', {
name:"blog post",
action(params) {
console.log(params);
mount(App, {page: <Provider store={store}><BlogPostPage slug={params.slug} /></Provider>});
}
});
// 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(()=>{
let state = store.getState();
if (!state || state.currentURL != lastPage)
FlowRouter.go(state.currentURL);
});

Answer 1

After a ton of research and a lot of help from this thread: https://github.com/webpack/webpack/issues/215
I have discovered that there is no reliable way to do this, at least not what I had in mind.
The solution I used in the end was in my entry file to use the following code:
import $ from 'jquery';
$('body').addClass('css-loading-class-goes-here');
require.ensure(['../store.js', './../lib/routes.jsx'], function(require) {
require(['../store.js','./../lib/routes.jsx']);
});
You can add css, append content or whatever else you want to do at the start there, but this will only execute after alot of the 'native' javascript from webpack and friends has loaded (about 350kb in my case). Then the require.ensure enforces webpack to load all my app specific javascript in a seperate bundle after the fact, so my 'loader' is at lest active for half of the load process.
This was the only solution that I could find in the end.