Set up your reducer as follows:
// reducers/index.jsx;; loading: loadingReducer;
Design a component to appear when loading, usually a spinner with some text. It will have a prop passed to it called 'loadingText':
// components/Loader.jsx// This exact loader is available with:// import {Loader} from 'react-loading-component'var Loader = React;
To give a component the ability to load, use the component generator LoadingComponent which takes two components as an argument: the original component, and the component to show when loading. Wrap and render your component (in this case 'Main') as follows:
// app.jsx;;; var store = ;; ; // You can initialise a LoadingComponent with an optional 3rd argument, which becomes its loadingId. With loadingIds (perhaps provided by an enumeration) you can easily control all LoadingComponents from anywhere that can dispatch actions.var MainComponent = ; ReactDOM;
Main will have two action generators passed to it as props: startLoading and endLoading. startLoading takes a string, which is passed to the loader object as a prop called loadingText:
// components/Main.jsx;; var Main = React; var { return alerts: statealerts } moduleexports = Main;