Lazy load components (#3879)

* feat: Lazy-load routes

* feat: Lazy-load modals

* feat: Lazy-load columns

* refactor: Simplify Bundle API

* feat: Optimize bundles

* feat: Prevent flashing the waiting state

* feat: Preload commonly used bundles

* feat: Lazy load Compose reducers

* feat: Lazy load Notifications reducer

* refactor: Move all dynamic imports into one file

* fix: Minor bugs

* fix: Manually hydrate the lazy-loaded reducers

* refactor: Move all dynamic imports to async-components

* fix: Loading modal style

* refactor: Avoid converting the raw state for each lazy hydration

* refactor: Remove unused component

* refactor: Maintain modal name

* fix: Add as=script to preload link

* chore: Fix lint error

* fix(components/bundle): Check if timestamp is set when computing elapsed

* fix: Load compose reducers for the onboarding modal

1 files changed, 23 insertions, 2 deletions

diff --git a/app/javascript/mastodon/store/configureStore.js b/app/javascript/mastodon/store/configureStore.js
index 1376d4cba..0fe29f031 100644
--- a/app/javascript/mastodon/store/configureStore.js
+++ b/app/javascript/mastodon/store/configureStore.js
@@ -1,15 +1,36 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
-import appReducer from '../reducers';
+import appReducer, { createReducer } from '../reducers';
+import { hydrateStoreLazy } from '../actions/store';
+import { hydrateAction } from '../containers/mastodon';
 import loadingBarMiddleware from '../middleware/loading_bar';
 import errorsMiddleware from '../middleware/errors';
 import soundsMiddleware from '../middleware/sounds';
 
 export default function configureStore() {
-  return createStore(appReducer, compose(applyMiddleware(
+  const store = createStore(appReducer, compose(applyMiddleware(
     thunk,
     loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'] }),
     errorsMiddleware(),
     soundsMiddleware()
   ), window.devToolsExtension ? window.devToolsExtension() : f => f));
+
+  store.asyncReducers = { };
+
+  return store;
 };
+
+export function injectAsyncReducer(store, name, asyncReducer) {
+  if (!store.asyncReducers[name]) {
+    // Keep track that we injected this reducer
+    store.asyncReducers[name] = asyncReducer;
+
+    // Add the current reducer to the store
+    store.replaceReducer(createReducer(store.asyncReducers));
+
+    // The state this reducer handles defaults to its initial state (stored inside the reducer)
+    // But that state may be out of date because of the server-side hydration, so we replay
+    // the hydration action but only for this reducer (all async reducers must listen for this dynamic action)
+    store.dispatch(hydrateStoreLazy(name, hydrateAction.state));
+  }
+}