loaders when navigating on client side

src/client.js

@@ -47,7 +47,7 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
       render={(props) => (
         <ReduxAsyncConnect
           {...props}
-          helpers={{client}}
+          helpers={{ client }}
           filter={item => !item.deferred}
           render={applyRouterMiddleware(useScroll())}
         />

src/components/Audioplayer/index.js

@@ -63,6 +63,11 @@ export class Audioplayer extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    // Make sure we have a current ayah to mount it to Audio
+    if (!this.props.currentAyah && !nextProps.currentFile) {
+      return false;
+    }
+
     // When you go directly to the surah page, /2, the files are not loaded yet
     if (this.props.isLoadedOnClient !== nextProps.isLoadedOnClient) {
       return this.handleAddFileListeners(nextProps.currentFile);
@@ -391,7 +396,7 @@ export class Audioplayer extends Component {
       setRepeat // eslint-disable-line no-shadow
     } = this.props;
 
-    if (isLoading) {
+    if (isLoading || !currentAyah) {
       return (
         <li className={`${style.container} ${className}`}>
           <div>Loading...</div>
@@ -407,13 +412,19 @@ export class Audioplayer extends Component {
               progress={currentTime / duration * 100}
               onTrackChange={this.handleTrackChange}
             /> : null}
-          {isLoadedOnClient && segments[currentAyah] && typeof segments[currentAyah] !== 'string' ?
-            <Segments
-              audio={currentFile}
-              segments={segments[currentAyah]}
-              currentAyah={currentAyah}
-              currentTime={currentTime}
-            /> : null}
+          {
+            isLoadedOnClient &&
+            segments &&
+            segments[currentAyah] &&
+            typeof segments[currentAyah] !== 'string' ?
+              <Segments
+                audio={currentFile}
+                segments={segments[currentAyah]}
+                currentAyah={currentAyah}
+                currentTime={currentTime}
+              /> :
+            null
+          }
         </div>
         <ul className={`list-inline ${style.controls}`}>
           <li className={style.controlItem}>

src/components/Ayah/index.js

@@ -79,8 +79,8 @@ export default class Ayah extends Component {
     return array.map((content, index) => {
       const arabic = new RegExp(/[\u0600-\u06FF]/);
       const character = content.text;
-      const isArabic  = arabic.test(character);
-      const lang      = (content.name || content.resource.name).replace(/\s+/g, '-').toLowerCase();
+      const isArabic = arabic.test(character);
+      const lang = (content.name || content.resource.name).replace(/\s+/g, '-').toLowerCase();
 
       return (
         <div
@@ -89,7 +89,10 @@ export default class Ayah extends Component {
         >
           <h4 className="montserrat">{content.name || content.resource.name}</h4>
           <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
-            <small dangerouslySetInnerHTML={{__html: content.text}} className={`${styles[lang] || 'times-new'}`} />
+            <small
+              dangerouslySetInnerHTML={{__html: content.text}}
+              className={`${styles[lang] || 'times-new'}`}
+            />
           </h2>
         </div>
       );
@@ -99,7 +102,7 @@ export default class Ayah extends Component {
   renderMedia() {
     const { ayah, mediaActions } = this.props;
 
-    if (!!ayah.mediaContent) return false;
+    if (!ayah.mediaContent) return false;
 
     return (
       <div>
@@ -131,7 +134,7 @@ export default class Ayah extends Component {
   }
 
   renderText() {
-    const { ayah, audioActions: { setCurrentWord }, tooltip } = this.props;
+    const { ayah, audioActions, tooltip } = this.props;
 
     if (!ayah.words[0].code) {
       return false;
@@ -159,7 +162,9 @@ export default class Ayah extends Component {
             key={word.code}
             id={id}
             rel="tooltip"
-            onClick={(event) => setCurrentWord(event.target.dataset.key)}
+            onClick={event =>
+              audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
+            }
             data-key={`${word.ayahKey}:${position}`}
             className={`${className}`}
             title={tooltipContent}
@@ -168,11 +173,13 @@ export default class Ayah extends Component {
         );
       }
 
-      const label = isLast ? {'title': `Verse ${ayah.ayahNum}`} : {}
+      const label = isLast ? { title: `Verse ${ayah.ayahNum}` } : {};
       return (
         <b
           id={id}
-          onClick={(event) => setCurrentWord(event.target.dataset.key)}
+          onClick={event =>
+            audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
+          }
           data-key={`${word.ayahKey}:${position}`}
           rel="tooltip"
           className={`${className} ${isLast} pointer`}
@@ -283,7 +290,7 @@ export default class Ayah extends Component {
 
   renderControls() {
     return (
-      <div className={`col-md-2 col-sm-2 ${styles.controls}`}>
+      <div className={`col-md-1 col-sm-1 ${styles.controls}`}>
         {this.renderAyahBadge()}
         {this.renderPlayLink()}
         {this.renderCopyLink()}
@@ -294,13 +301,13 @@ export default class Ayah extends Component {
 
   render() {
     const { ayah, currentAyah } = this.props;
-    const className = ayah.ayahKey === currentAyah ? 'highlight' : "";
+    const className = ayah.ayahKey === currentAyah ? 'highlight' : '';
     debug('component:Ayah', `Render ${this.props.ayah.ayahNum}`);
 
     return (
       <Element name={`ayah:${ayah.ayahKey}`} className={`row ${className} ${styles.container}`}>
         {this.renderControls()}
-        <div className="col-md-10 col-sm-10">
+        <div className="col-md-11 col-sm-11">
           {this.renderText()}
           {this.renderTranslations()}
           {this.renderMedia()}

src/components/Loader/index.js

@@ -1,15 +1,10 @@
 import React from 'react';
 
-const loading = require('../../../static/images/loading.gif');
+const styles = require('./style.scss');
 
 const Loader = () => (
-  <div className="loading" nghide="currentSurah.ayahs">
-    <div className="row">
-      <div className="colmd6 colmdoffset3 textcenter">
-        <img src={loading} alt="Loader" />
-        <h3>Loading...</h3>
-      </div>
-    </div>
+  <div className={styles.loader}>
+    Loading...
   </div>
 );
 

src/components/Loader/style.scss

@@ -0,0 +1,49 @@
+@import '../../styles/variables.scss';
+
+$timing: 1s;
+$size: 4px;
+$border-size: $size * 1.25;
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+
+.loader {
+  margin: 30px auto;
+  font-size: $size;
+  position: relative;
+  text-indent: -9999em;
+  border-top: $border-size solid $brand-primary;
+  border-right: $border-size solid $brand-primary;
+  border-bottom: $border-size solid $brand-primary;
+  border-left: $border-size solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load $timing infinite linear;
+  animation: load $timing infinite linear;
+}
+
+@-webkit-keyframes load {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

src/components/NoScriptWarning/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Link from 'react-router/lib/Link';
+
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+
+const styles = require('./style.scss');
+
+const NoScriptWarning = () => (
+  <noscript>
+    {/* <Row>
+      <Col md={12} className={styles.noscript_warning}>
+        <p> Looks like either your browser does not support Javascript or its disabled. Quran.com workes best with JavaScript enabled.
+          For more instruction on how to enable javascript
+
+          <Link to="http://www.enable-javascript.com/"> Click here</Link>
+        </p>
+        </Col>
+      </Row> */}
+  </noscript>
+);
+
+export default NoScriptWarning;

src/components/SearchInput/index.js

@@ -102,7 +102,8 @@ class SearchInput extends Component {
           type="search"
           placeholder="Search"
           ref="search"
-          onFocus={() => this.setState({showAutocomplete: true})}
+          onFocus={() => this.setState({ showAutocomplete: true })}
+          onBlur={() => this.setState({ showAutocomplete: false })}
           onKeyUp={this.search}
           ref={(ref) => {
             this.input = ref;

src/containers/Surah/connect.js

@@ -19,6 +19,11 @@ export const surahsConnect = ({ store: { getState, dispatch } }) => {
   if (!isAllLoaded(getState())) {
     debug('component:Surah:surahsConnect', 'Surahs not loaded');
 
+    if (__CLIENT__) {
+      dispatch(loadAll());
+      return true;
+    }
+
     return dispatch(loadAll());
   }
 
@@ -64,6 +69,11 @@ export const ayahsConnect = ({ store: { dispatch, getState }, params }) => {
 
     dispatch(clearCurrent(surahId)); // In the case where you go to same surah but later ayahs.
 
+    if (__CLIENT__) {
+      dispatch(loadAyahs(surahId, from, to, getState().options));
+      return true;
+    }
+
     return dispatch(loadAyahs(surahId, from, to, getState().options));
   }
 

src/containers/Surah/index.js

@@ -16,6 +16,7 @@ import Helmet from 'react-helmet';
 import Sidebar from 'components/Sidebar';
 
 // components
+import Loader from 'components/Loader';
 import LazyLoad from 'components/LazyLoad';
 import PageBreak from 'components/PageBreak';
 import Audioplayer from 'components/Audioplayer';
@@ -52,12 +53,6 @@ const style = require('./style.scss');
 
 let lastScroll = 0;
 
-const zeroPad = (num, places) => {
-  const zero = places - num.toString().length + 1;
-
-  return Array(+(zero > 0 && zero)).join('0') + num;
-};
-
 class Surah extends Component {
   static propTypes = {
     surah: PropTypes.object.isRequired,
@@ -74,7 +69,7 @@ class Surah extends Component {
     isAuthenticated: PropTypes.bool.isRequired,
     options: PropTypes.object.isRequired,
     params: PropTypes.object.isRequired,
-    ayahs: PropTypes.object.isRequired,
+    ayahs: PropTypes.object,
     isStarted: PropTypes.bool,
     isPlaying: PropTypes.bool
   };
@@ -299,7 +294,7 @@ class Surah extends Component {
             }
           </ul>
         }
-        loadingComponent={<p>Loading...</p>}
+        loadingComponent={<Loader />}
       />
     );
   }
@@ -352,7 +347,7 @@ class Surah extends Component {
   }
 
   renderSidebar() {
-    const { surah, surahs, ayahIds, options, actions } = this.props;
+    const { surah, surahs, ayahIds, options } = this.props;
 
     return (
       <div>
@@ -391,9 +386,11 @@ class Surah extends Component {
   }
 
   render() {
-    const { surah, surahs, ayahIds, options, actions, footer } = this.props;
+    const { surah, options, ayahs, actions } = this.props;
     debug('component:Surah', 'Render');
 
+    if (!ayahs) return <div style={{ margin: '50px auto'}}><Loader /></div>;
+
     return (
       <div className="surah-body">
         <Helmet
@@ -438,7 +435,7 @@ class Surah extends Component {
         <Sidebar
           open={this.state.sidebarOpen}
           onSetOpen={(open) => this.setState({sidebarOpen: open})}
-          >
+        >
           {this.renderSidebar()}
         </Sidebar>
         <div className={`container-fluid ${style['surah-container']}`}>
@@ -467,13 +464,16 @@ class Surah extends Component {
   }
 }
 
-const AsyncSurah = asyncConnect([{ promise: surahsConnect }, { promise: ayahsConnect }])(Surah);
+const AsyncSurah = asyncConnect([
+  { promise: surahsConnect },
+  { promise: ayahsConnect }
+])(Surah);
 
 function mapStateToProps(state, ownProps) {
   const surahId = parseInt(ownProps.params.surahId, 10);
   const surah: Object = state.surahs.entities[surahId];
-  const ayahs: Object = state.ayahs.entities[surahId];
-  const ayahArray = Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10));
+  const ayahs: ?Object = state.ayahs.entities[surahId];
+  const ayahArray = ayahs ? Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10)) : [];
   const ayahIds = new Set(ayahArray);
   const lastAyahInArray = ayahArray.slice(-1)[0];
 

src/containers/Surah/style.scss

@@ -26,8 +26,9 @@
   border-right: 1px solid rgba(173, 170, 156, 0.5);
 }
 
-:local .surah-container {
+.surah-container {
   padding-top: 70px;
+  min-height: 80vh;
 
   @media(max-width: $screen-xs-max) {
     padding-top: 70px;

src/redux/modules/audioplayer.js

@@ -42,7 +42,8 @@ const initialState = {
   },
   shouldScroll: true,
   isLoadedOnClient: false,
-  isLoading: true
+  isLoading: true,
+  segments: {}
 };
 
 export default function reducer(state = initialState, action = {}) {