Fixed loading

src/client.js

@@ -4,7 +4,7 @@
 import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import useScroll from 'scroll-behavior/lib/useStandardScroll';
+import useScroll from 'scroll-behavior/lib/useSimpleScroll';
 import createStore from './redux/create';
 import ApiClient from './helpers/ApiClient';
 import debug from 'debug';

src/components/Ayah/index.js

@@ -13,6 +13,10 @@ export default class Ayah extends Component {
     ayah: PropTypes.object.isRequired
   };
 
+  shouldComponentUpdate(nextProps) {
+    return this.props.ayah !== nextProps.ayah;
+  }
+
   onAudioChange(ayah, event) {
     event.preventDefault();
 

src/components/FontStyles/index.js

@@ -7,7 +7,7 @@ const bismillah = `@font-face {font-family: 'bismillah';
 
 @connect(
   state => ({
-    fontFaces: [].concat(state.ayahs.fontFaces, state.searchResults.fontFaces, [bismillah])
+    fontFaces: [...state.ayahs.fontFaces, ...state.searchResults.fontFaces, bismillah]
   })
 )
 export default class FontStyles extends Component {

src/containers/Surah/SurahNavBar/SurahsDropdown/index.js

@@ -1,18 +1,18 @@
 import React, { Component, PropTypes } from 'react';
 import { NavDropdown, MenuItem, Row, Col } from 'react-bootstrap';
 import { connect } from 'react-redux';
-import { pushState } from 'redux-router';
+import { push } from 'react-router-redux';
 
-@connect(state => ({surahs: state.surahs.entities}), { pushState })
+@connect(state => ({surahs: state.surahs.entities}), { push })
 export default class SurahsDropdown extends Component {
   static propTypes = {
     surahs: PropTypes.object,
     surah: PropTypes.object,
-    pushState: PropTypes.func
+    push: PropTypes.func
   };
 
   onSelect(event, surahId) {
-    this.props.pushState(null, `/${surahId}`);
+    this.props.push(`/${surahId}`);
   }
 
   renderMenu() {

src/containers/Surah/index.js

@@ -31,7 +31,8 @@ import SurahNavBar from './SurahNavBar';
       ayahKeys,
       isEndOfSurah,
       ayahIds,
-      isLoading: state.ayahs.isLoading,
+      isLoading: state.ayahs.loading,
+      isLoaded: state.ayahs.loaded,
       lines: state.lines.lines,
       options: state.options,
       isChangingSurah: state.surahs.current !== ownProps.params.surahId
@@ -50,6 +51,7 @@ export default class Surah extends Component {
     isChangingSurah: PropTypes.bool,
     isEndOfSurah: PropTypes.bool,
     isLoading: PropTypes.bool,
+    isLoaded: PropTypes.bool,
     options: PropTypes.object,
     ayahKeys: PropTypes.array,
     ayahIds: PropTypes.array,
@@ -60,16 +62,20 @@ export default class Surah extends Component {
     location: PropTypes.object
   };
 
+  state = {
+    lazyLoading: false
+  };
+
   shouldComponentUpdate(nextProps) {
     const routingToSameComponent = !this.props.isChangingSurah && nextProps.isChangingSurah;
     const routingToSameComponentFinished = this.props.isChangingSurah && !nextProps.isChangingSurah;
-    // const lazyLoadFinished = !routingToSameComponent && (!this.props.isLoaded && nextProps.isLoaded);
+    const lazyLoadFinished = !routingToSameComponent && (!this.props.isLoaded && nextProps.isLoaded);
     const readingModeTriggered = this.props.options.isReadingMode !== nextProps.options.isReadingMode;
 
     return (
       routingToSameComponent ||
       routingToSameComponentFinished ||
-      // lazyLoadFinished ||
+      lazyLoadFinished ||
       readingModeTriggered
     );
   }
@@ -133,7 +139,7 @@ export default class Surah extends Component {
     const to = (from + size);
 
     if (!ayahIds.includes(to)) {
-      loadAyahsDispatch(surah.id, from, to, options);
+      loadAyahsDispatch(surah.id, from, to, options).then(() => this.setState({lazyLoading: false}));
     }
   }
 
@@ -146,10 +152,13 @@ export default class Surah extends Component {
           return false;
         }
 
-        if (!isLoading && window.pageYOffset > (document.body.scrollHeight - window.innerHeight - 1000)) {
+        if (!isLoading && !this.state.lazyLoading && window.pageYOffset > (document.body.scrollHeight - window.innerHeight - 1000)) {
           // Reached the end.
-          // this.lazyLoadAyahs();
-          console.log('LAZYLOAD');
+          this.setState({
+            lazyLoading: true
+          });
+
+          this.lazyLoadAyahs();
         }
       };
 

src/redux/modules/ayahs.js

@@ -43,7 +43,7 @@ export default function reducer(state = initialState, action = {}) {
           [action.surahId]: Object.assign({}, state.entities[action.surahId], action.result.entities.ayahs)
         },
         result: Object.assign({}, state.result, action.result.result),
-        fontFaces: [].concat(state.fontFaces, createFontFacesArray(action.result.result.map(key => action.result.entities.ayahs[key])))
+        fontFaces: [...state.fontFaces, ...createFontFacesArray(action.result.result.map(key => action.result.entities.ayahs[key]))],
       };
     case LOAD_FAIL:
       console.log(action);