Merge pull request #41 from iroy2000/adding-lazy-loading-capabilities

Adding lazy loading capabilities

Author: iroy2000

.babelrc

@@ -11,7 +11,10 @@
   "env": {
     "development": {
       "presets": ["react-hmre"]
-    }
+    },
+    "production": {
+      "presets": ["react-optimize"]
+    },
   },
   "plugins": [
     ["typecheck", {

README.md

@@ -21,9 +21,6 @@ __Note:__ This boilerplate is not to show case how to code in React / Redux, it
 
 * `Isomorphic (Universal) support`, feel free to add server side support to it, or you can use something like [Next.js](https://github.com/zeit/next.js/), [react-server](https://github.com/redfin/react-server) or [electrode](http://www.electrode.io/)
 
-__Note:__ We also have a branch called `slim`, which we have removed Saga and a few dependencies. To checkout that branch, you can run the following command :
-
-`git clone -b slim https://github.com/iroy2000/react-redux-boilerplate.git`
 
 ### Features / Benefits
 
@@ -38,6 +35,7 @@ Development
 * Webpack 3
 * Reselect
 * Saga
+* Lazy Loading component supports
 * Type Checking with Babel Type Check ( Flow syntax )
 * ESLint for syntax check
 * Jest and Enzyme for Unit testing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-boilerplate",
-  "version": "0.9.52",
+  "version": "0.9.55",
   "description": "React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build process framework out of the box.",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dashboard -p 3300 -c red -t dashboard -- node bin/commands.js dev",
@@ -28,13 +28,15 @@
     "babel-eslint": "^8.2.1",
     "babel-jest": "^22.1.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-plugin-typecheck": "^3.9.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-hmre": "^1.1.1",
+    "babel-preset-react-optimize": "^1.0.1",
     "babel-preset-stage-0": "^6.24.1",
     "babel-register": "^6.26.0",
     "babel-runtime": "^6.26.0",
@@ -85,6 +87,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
+    "react-loadable": "^5.3.1",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
@@ -96,7 +99,10 @@
   },
   "jest": {
     "verbose": true,
-    "testPathIgnorePatterns": ["<rootDir>/__tests__/setup/", "<rootDir>/node_modules/"],
+    "testPathIgnorePatterns": [
+      "<rootDir>/__tests__/setup/",
+      "<rootDir>/node_modules/"
+    ],
     "setupTestFrameworkScriptFile": "<rootDir>/__tests__/setup/jestTestSetup.js",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",

src/js/common/components/Example/Example.css

@@ -11,7 +11,7 @@
 
    h1 {
      font-size: 50px;
-     .emphsize {
+     .emphasize {
        font-size: 1.5em;
        font-weight: bold;
        @if 3 < 5 {

src/js/common/components/Example/Example.jsx

@@ -10,7 +10,7 @@ class Example extends PureComponent {
     if (result && result.size && result.size > 0) {
       return (
         <div className="exampleOutput">
-          <h1>Let&apos;s Get <span className="emphsize">Started</span></h1>
+          <h1>Let&apos;s Get <span className="emphasize">Started</span></h1>
           <p>If you see this screen, it means you are all setup \o/</p>
           <p>The following JSON are showing contents coming from Redux, Saga and Config.</p>
           <pre>

src/js/common/components/LazyLoading/LazyLoading.css

@@ -0,0 +1,42 @@
+.loader {
+  color: #f07d00;
+  font-size: 20px;
+  margin: 100px auto;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-animation: spinner 1s infinite linear;
+  animation: spinner 1s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+@keyframes spinner {
+  0%,
+  100% {
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+  12.5% {
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+  25% {
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+  37.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  50% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  62.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+  75% {
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+  87.5% {
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}

src/js/common/components/LazyLoading/LazyLoading.jsx

@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react';
+
+import './LazyLoading.css'
+
+class LazyLoading extends PureComponent {
+  getMessage() {
+    const {
+      isLoading,
+      timedOut,
+      pastDelay,
+      error,
+    } = this.props;
+
+    const errorMessage = 'We can't pull up information at this point, please try again.'
+
+    if (isLoading) {
+      if (timedOut) {
+        return <div>{errorMessage}</div>;
+      } else if (pastDelay) {
+        return <div className="loader">Loading...</div>;
+      }
+      return null;
+    } else if (error) {
+      return <div>{errorMessage}</div>;
+    }
+
+    return null;
+  }
+
+  render() {
+    return this.getMessage()
+  }
+}
+
+export default LazyLoading;

src/js/common/components/LazyLoading/index.js

@@ -0,0 +1 @@
+export { default as LazyLoading } from './LazyLoading';

src/js/views/example/index.jsx

@@ -1,14 +1,21 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import Loadable from 'react-loadable';
 
+import LazyLoading from '../../common/components/LazyLoading/LazyLoading'
 import { actions as exampleActions } from '../../redux/modules/example';
 import { exampleSelector } from '../../redux/selectors/exampleSelector';
-import { Example, ExampleWithError } from '../../common/components/Example';
+import { ExampleWithError } from '../../common/components/Example';
 import { ErrorBoundary } from '../../common/components/Utilities';
 
 require('../../../style/index.css');
 
+const LazyExample = Loadable({
+  loader: () => import('../../common/components/Example/Example'),
+  loading: LazyLoading,
+})
+
 const mapStateToProps = state => ({
   example: exampleSelector(state),
 });
@@ -30,7 +37,7 @@ class ExampleView extends Component {
   render() {
     return (
       <Fragment>
-        <Example {...this.props} />
+        <LazyExample {...this.props} />
         <ErrorBoundary>
           <ExampleWithError {...this.props} />
         </ErrorBoundary>

webpack.config.common.js

@@ -68,7 +68,11 @@ const COMMON_LOADERS = [
     loader: 'babel-loader',
     options: {
       cacheDirectory: true,
-      plugins: ['transform-runtime', 'transform-decorators-legacy'],
+      plugins: [
+        'transform-runtime',
+        'transform-decorators-legacy',
+        'syntax-dynamic-import'
+      ],
     },
   },
   {