Loading transition on the client

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/SearchAutocomplete/index.js

@@ -1,3 +1,5 @@
+// TODO: Should be handled by redux and not component states.
+// TODO: This needs to be rewritten
 import React, { Component, PropTypes } from 'react';
 import ApiClient from 'helpers/ApiClient';
 import { connect } from 'react-redux';
@@ -49,13 +51,13 @@ class SearchAutocomplete extends Component {
     this.handleSurahSuggestions(value);
 
     if (value.length === 0 && this.state.surahs.length > 0) {
-      this.setState({surahs: []});
+      this.setState({ surahs: [] });
     }
 
     if (value.length >= 3) {
       this.handleAyahSuggestions(value);
     } else if (this.state.ayat.length > 0) {
-      this.setState({ayat: []});
+      this.setState({ ayat: [] });
     }
   }
 
@@ -100,7 +102,7 @@ class SearchAutocomplete extends Component {
     if (this.cached[lang][value]) {
       this.setState({ ayat: this.cached[lang][value] });
     } else {
-      client.get('/v2/suggest', {params: {q: value, l: lang}}).then((res) => {
+      client.get('/v2/suggest', { params: { q: value, l: lang } }).then((res) => {
         this.cached[lang][value] = res;
 
         if (this.props.value.trim() === value) {
@@ -201,7 +203,6 @@ class SearchAutocomplete extends Component {
   }
 }
 
-
 function mapStateToProps(state) {
   const surahs = state.surahs.entities;
   const surahId = state.surahs.current;

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/Search/index.js

@@ -14,7 +14,7 @@ import Col from 'react-bootstrap/lib/Col';
 
 import Header from './Header';
 import Ayah from 'components/Ayah';
-import CoreLoader from 'components/Loader';
+import Loader from 'components/Loader';
 
 import { search } from 'redux/actions/search.js';
 
@@ -36,6 +36,10 @@ class Search extends Component {
     options: PropTypes.object
   };
 
+  static defaultProps = {
+    results: []
+  };
+
   static contextTypes = {
     metrics: MetricsPropTypes.metrics
   };
@@ -94,8 +98,8 @@ class Search extends Component {
                   initialSelected={page - 1}
                   forceSelected={page - 1}
                   clickCallback={this.handlePageChange}
-                  containerClassName={"pagination"}
-                  subContainerClassName={"pages pagination"}
+                  containerClassName="pagination"
+                  subContainerClassName="pages pagination"
                   activeClass={style.active}
                 />
               </Col>
@@ -109,7 +113,7 @@ class Search extends Component {
   }
 
   renderBody() {
-    const { isErrored, isLoading, total, results,options, ayahs } = this.props;
+    const { isErrored, isLoading, results, options, ayahs } = this.props;
 
     if (isErrored) {
       return (
@@ -119,16 +123,22 @@ class Search extends Component {
       );
     }
 
-    if (!total) {
-      return <h3 className="text-center" style={{padding: '15%'}}>No results found.</h3>;
+    if (isLoading) {
+      return <div style={{ padding: '15%' }}><Loader /></div>;
     }
 
-    if (isLoading) {
-      return <div style={{padding: '15%'}}><CoreLoader /></div>;
+    if (!results.length) {
+      return <h3 className="text-center" style={{ padding: '15%' }}>No results found.</h3>;
     }
 
     return results.map(result => (
-      <Ayah ayah={ayahs[result.ayah]} match={result.match} key={result.ayah} tooltip={options.tooltip} isSearched />
+      <Ayah
+        ayah={ayahs[result.ayah]}
+        match={result.match}
+        key={result.ayah}
+        tooltip={options.tooltip}
+        isSearched
+      />
     ));
   }
 
@@ -160,6 +170,11 @@ class Search extends Component {
 
 const AsyncSearch = asyncConnect([{
   promise({ store: { dispatch }, location: { query } }) {
+    if (__CLIENT__) {
+      dispatch(search(query));
+      return false;
+    }
+
     return dispatch(search(query));
   }
 }])(Search);

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));
   }