React loadable (#701)

* React Loadable for components

* Eslint happy

Author: mmahalwy

package.json

@@ -29,10 +29,11 @@
     "autoprefixer": "6.6.1",
     "autoprefixer-loader": "3.2.0",
     "babel-cli": "6.11.4",
-    "babel-core": "6.13.2",
-    "babel-loader": "6.2.4",
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
     "babel-plugin-add-module-exports": "0.1.4",
-    "babel-plugin-system-import-transformer": "2.2.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-system-import-transformer": "^3.1.0",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-plugin-transform-react-constant-elements": "6.9.1",
     "babel-plugin-transform-react-display-name": "6.8.0",
@@ -41,7 +42,7 @@
     "babel-plugin-transform-runtime": "6.12.0",
     "babel-plugin-typecheck": "3.9.0",
     "babel-polyfill": "6.13.0",
-    "babel-preset-es2015": "6.13.2",
+    "babel-preset-es2015": "^6.24.0",
     "babel-preset-react": "6.11.1",
     "babel-preset-stage-0": "6.5.0",
     "babel-preset-stage-2": "6.13.0",
@@ -99,6 +100,7 @@
     "react-hot-loader": "3.0.0-beta.6",
     "react-inlinesvg": "0.5.4",
     "react-intl": "2.1.5",
+    "react-loadable": "^3.0.1",
     "react-metrics": "1.2.1",
     "react-paginate": "4.1.0",
     "react-redux": "5.0.1",

src/components/Audioplayer/index.js

@@ -3,6 +3,7 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { camelize } from 'humps';
+import Loadable from 'react-loadable';
 
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
@@ -15,13 +16,18 @@ import { surahType, segmentType } from 'types';
 // Redux
 import * as AudioActions from 'redux/actions/audioplayer';
 
+import ComponentLoader from 'components/ComponentLoader';
 import Track from './Track';
 import Segments from './Segments';
 import ScrollButton from './ScrollButton';
-import RepeatDropdown from './RepeatDropdown';
 
 const style = require('./style.scss');
 
+const RepeatDropdown = Loadable({
+  loader: () => import('./RepeatDropdown'),
+  LoadingComponent: ComponentLoader
+});
+
 export class Audioplayer extends Component {
   static propTypes = {
     className: PropTypes.string,

src/components/ComponentLoader/index.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+
+const ComponentLoader = ({ isLoading, error, pastDelay }) => {
+  if (isLoading) {
+    return pastDelay ? <div>Loading...</div> : null;
+  } else if (error) {
+    return <div>Error! Component failed to load</div>;
+  }
+
+  return null;
+};
+
+ComponentLoader.propTypes = {
+  isLoading: PropTypes.bool,
+  error: PropTypes.any, // eslint-disable-line
+  pastDelay: PropTypes.bool
+};
+
+export default ComponentLoader;

src/components/PageView/index.js

@@ -0,0 +1,53 @@
+import React, { PropTypes } from 'react';
+
+import Line from 'components/Line';
+import PageBreak from 'components/PageBreak';
+
+const PageView = ({ lines, keys, currentVerse, options, isPlaying, audioActions }) => {
+  const elements = keys.map((lineNum, index) => {
+    const nextNum = keys[index + 1];
+    const pageNum = lineNum.split('-')[0];
+    const line = lines[lineNum];
+
+    if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
+      return [
+        <Line
+          line={line}
+          key={lineNum}
+          currentVerse={currentVerse}
+          tooltip={options.tooltip}
+          audioActions={audioActions}
+          isPlaying={isPlaying}
+        />,
+        <PageBreak pageNum={parseInt(pageNum, 10) + 1} />
+      ];
+    }
+
+    return (
+      <Line
+        line={line}
+        key={lineNum}
+        currentVerse={currentVerse}
+        tooltip={options.tooltip}
+        audioActions={audioActions}
+        isPlaying={isPlaying}
+      />
+    );
+  });
+
+  return (
+    <div>{elements}</div>
+  );
+};
+
+PageView.propTypes = {
+  keys: PropTypes.array, // eslint-disable-line
+  lines: PropTypes.object.isRequired, // eslint-disable-line
+  audioActions: PropTypes.object.isRequired, // eslint-disable-line
+  currentVerse: PropTypes.string,
+  bookmarks: PropTypes.object.isRequired, // eslint-disable-line
+  options: PropTypes.object.isRequired, // eslint-disable-line
+  isPlaying: PropTypes.bool
+};
+
+export default PageView;

src/components/TopOptions/index.js

@@ -1,14 +1,12 @@
 import React from 'react';
-import Title from 'quran-components/lib/SurahTitle';
 import Share from 'components/Share';
 import { surahType } from 'types';
 
-const styles = require('./style.scss');
-
 const TopOptions = ({ chapter }) => (
   <div className="row">
     <div className="col-md-4 hidden-xs hidden-sm">
-      <Title chapterNumber={chapter.id} className={styles.title} color={'#2CA4AB'} />
+      {/* NOTE: Caused about 7000 lines of code to accept all titles SVG */}
+      {/* <Title chapterNumber={chapter.id} className={styles.title} color={'#2CA4AB'} /> */}
     </div>
     <div className="col-md-8 text-right">
       <ul className="list-inline">

src/components/Verse/index.js

@@ -1,18 +1,28 @@
 import React, { Component, PropTypes } from 'react';
 import Link from 'react-router/lib/Link';
-import { Element } from 'react-scroll';
+import Element from 'react-scroll/lib/components/Element';
 import { connect } from 'react-redux';
+import Loadable from 'react-loadable';
 
 import { verseType, matchType, surahType } from 'types';
-import Share from 'components/Share';
-import Copy from 'components/Copy';
+import ComponentLoader from 'components/ComponentLoader';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import Word from 'components/Word';
 import Translation from 'components/Translation';
 import debug from 'helpers/debug';
 
 const styles = require('./style.scss');
 
+const Copy = Loadable({
+  loader: () => import('components/Copy'),
+  LoadingComponent: ComponentLoader
+});
+
+const Share = Loadable({
+  loader: () => import('components/Share'),
+  LoadingComponent: ComponentLoader
+});
+
 class Verse extends Component {
   static propTypes = {
     isSearched: PropTypes.bool,

src/containers/Surah/index.js

@@ -8,17 +8,14 @@ import { asyncConnect } from 'redux-connect';
 import { push } from 'react-router-redux';
 
 import Helmet from 'react-helmet';
+import Loadable from 'react-loadable';
 
 // components
 import Loader from 'quran-components/lib/Loader';
 import LazyLoad from 'components/LazyLoad';
-import PageBreak from 'components/PageBreak';
-import Audioplayer from 'components/Audioplayer';
-import SurahInfo from 'components/SurahInfo';
 import Verse from 'components/Verse';
-import Line from 'components/Line';
+import ComponentLoader from 'components/ComponentLoader';
 import Bismillah from 'components/Bismillah';
-import TopOptions from 'components/TopOptions';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 // utils
@@ -42,6 +39,24 @@ const LoaderStyle = { width: '10em', height: '10em' };
 
 const style = require('./style.scss');
 
+const PageView = Loadable({
+  loader: () => import('components/PageView'),
+  LoadingComponent: ComponentLoader
+});
+
+const Audioplayer = Loadable({
+  loader: () => import('components/Audioplayer'),
+  LoadingComponent: ComponentLoader
+});
+const SurahInfo = Loadable({
+  loader: () => import('components/SurahInfo'),
+  LoadingComponent: ComponentLoader
+});
+const TopOptions = Loadable({
+  loader: () => import('components/TopOptions'),
+  LoadingComponent: ComponentLoader
+});
+
 class Surah extends Component {
   static propTypes = {
     chapter: surahType.isRequired,
@@ -310,36 +325,16 @@ class Surah extends Component {
     const { lines, options, currentVerse, isPlaying, actions } = this.props;
     const keys = Object.keys(lines);
 
-    return keys.map((lineNum, index) => {
-      const nextNum = keys[index + 1];
-      const pageNum = lineNum.split('-')[0];
-      const line = lines[lineNum];
-
-      if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
-        return [
-          <Line
-            line={line}
-            key={lineNum}
-            currentVerse={currentVerse}
-            tooltip={options.tooltip}
-            audioActions={actions.audio}
-            isPlaying={isPlaying}
-          />,
-          <PageBreak pageNum={parseInt(pageNum, 10) + 1} />
-        ];
-      }
-
-      return (
-        <Line
-          line={line}
-          key={lineNum}
-          currentVerse={currentVerse}
-          tooltip={options.tooltip}
-          audioActions={actions.audio}
-          isPlaying={isPlaying}
-        />
-      );
-    });
+    return (
+      <PageView
+        lines={lines}
+        keys={keys}
+        options={options}
+        currentVerse={currentVerse}
+        audioActions={actions.audio}
+        isPlaying={isPlaying}
+      />
+    );
   }
 
   render() {

src/routes.js

@@ -39,25 +39,25 @@ export default (store) => {
   return (
     <Route path="/" component={App} onEnter={shouldAuth}>
       <IndexRoute components={Home} />
-      <Route path="/donations" getComponent={(nextState, cb) => System.import('./containers/Donations').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
-      <Route path="/contributions" getComponent={(nextState, cb) => System.import('./containers/Donations').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/donations" getComponent={(nextState, cb) => import('./containers/Donations').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/contributions" getComponent={(nextState, cb) => import('./containers/Donations').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
 
-      <Route path="/about" getComponent={(nextState, cb) => System.import('./containers/About').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/about" getComponent={(nextState, cb) => import('./containers/About').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
 
-      <Route path="/contact" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
-      <Route path="/contactus" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/contact" getComponent={(nextState, cb) => import('./containers/Contact').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/contactus" getComponent={(nextState, cb) => import('./containers/Contact').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
 
-      <Route path="/mobile" getComponent={(nextState, cb) => System.import('./containers/MobileLanding').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
-      <Route path="/apps" getComponent={(nextState, cb) => System.import('./containers/MobileLanding').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/mobile" getComponent={(nextState, cb) => import('./containers/MobileLanding').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/apps" getComponent={(nextState, cb) => import('./containers/MobileLanding').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
 
-      <Route path="/error/:errorKey" getComponent={(nextState, cb) => System.import('./containers/Error').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/error/:errorKey" getComponent={(nextState, cb) => import('./containers/Error').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
 
-      <Route path="/search" getComponent={(nextState, cb) => System.import('./containers/Search').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/search" getComponent={(nextState, cb) => import('./containers/Search').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
 
-      <Route path="/login" getComponent={(nextState, cb) => System.import('./containers/Login').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+      <Route path="/login" getComponent={(nextState, cb) => import('./containers/Login').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
 
       <Route onEnter={requireLogin}>
-        <Route path="/profile" getComponent={(nextState, cb) => System.import('./containers/Profile').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
+        <Route path="/profile" getComponent={(nextState, cb) => import('./containers/Profile').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
       </Route>
 
       <Redirect from="/:chapterId:(:range)" to="/:chapterId(/:range)" />
@@ -66,9 +66,9 @@ export default (store) => {
         path="/:chapterId(/:range)"
         getComponents={(nextState, cb) =>
           Promise.all([
-            System.import('./containers/Surah'),
-            System.import('./components/GlobalNav/Surah'),
-            System.import('./components/GlobalSidebar/Surah'),
+            import('./containers/Surah'),
+            import('./components/GlobalNav/Surah'),
+            import('./components/GlobalSidebar/Surah'),
           ])
           .then(modules => cb(
             null,