From 09946e15047b70966c9fa678746abc33e104135d Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Fri, 9 Mar 2018 12:06:02 -0700
Subject: [PATCH] Improve loader for word list

---
 src/components/MainDisplay.jsx                | 3 +++
 src/components/display/WordsList.jsx          | 7 +++++++
 src/components/structure/Pagination/index.jsx | 2 +-
 src/index.jsx                                 | 5 +++++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/MainDisplay.jsx b/src/components/MainDisplay.jsx
index 31c7ecc..28bca00 100644
--- a/src/components/MainDisplay.jsx
+++ b/src/components/MainDisplay.jsx
@@ -16,6 +16,7 @@ export class MainDisplay extends Component {
 
     PropTypes.checkPropTypes({
       dictionaryInfo: PropTypes.object.isRequired,
+      isLoadingWords: PropTypes.bool,
       wordsToDisplay: PropTypes.array.isRequired,
       wordsAreFiltered: PropTypes.bool,
       wordsInCurrentList: PropTypes.number,
@@ -56,6 +57,7 @@ export class MainDisplay extends Component {
   render () {
     const {
       dictionaryInfo,
+      isLoadingWords,
       wordsToDisplay,
       wordsAreFiltered,
       wordsInCurrentList,
@@ -116,6 +118,7 @@ export class MainDisplay extends Component {
                 isTop />
 
               <WordsList
+                isLoadingWords={ isLoadingWords }
                 words={ wordsToDisplay }
                 adsEveryXWords={ 10 }
                 updateDisplay={ updateDisplay } />
diff --git a/src/components/display/WordsList.jsx b/src/components/display/WordsList.jsx
index 98bfa6e..058b4ad 100644
--- a/src/components/display/WordsList.jsx
+++ b/src/components/display/WordsList.jsx
@@ -13,6 +13,7 @@ export class WordsList extends Component {
     super(props);
 
     PropTypes.checkPropTypes({
+      isLoadingWords: PropTypes.bool,
       adsEveryXWords: PropTypes.number,
       words: PropTypes.array,
       updateDisplay: PropTypes.func.isRequired,
@@ -22,6 +23,12 @@ export class WordsList extends Component {
   render () {
     const adsEveryXWords = this.props.adsEveryXWords || 10;
 
+    if (this.props.isLoadingWords) {
+      return <div className="content has-text-centered">
+        <div className="loader" style="display: inline-block; width: 60px; height: 60px;" />
+      </div>;
+    }
+    
     return (
       <div className='box'>
 
diff --git a/src/components/structure/Pagination/index.jsx b/src/components/structure/Pagination/index.jsx
index 83d4f64..f0ac101 100644
--- a/src/components/structure/Pagination/index.jsx
+++ b/src/components/structure/Pagination/index.jsx
@@ -16,7 +16,7 @@ export const Pagination = (props) => {
   const { currentPage, itemsPerPage, stats, setPage, wordsInCurrentList, isTop } = props;
   
   if (wordsInCurrentList === null) {
-    return <div className="loader"></div>;
+    return null;
   }
 
   const lastPage = Math.floor(wordsInCurrentList / itemsPerPage);
diff --git a/src/index.jsx b/src/index.jsx
index 7a6a012..5b1d345 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -46,6 +46,7 @@ class App extends Component {
         ignoreDiacritics: false,
         filteredPartsOfSpeech: [...dictionary.partsOfSpeech, 'Uncategorized'],
       },
+      isLoadingWords: true,
       wordsInCurrentList: null,
     }
 
@@ -181,18 +182,21 @@ class App extends Component {
         displayedWords,
         stats: getWordsStats(words, partsOfSpeech, this.state.settings.caseSensitive),
         wordsInCurrentList,
+        isLoadingWords: false,
       }, () => callback());
     });
   }
 
   search (searchConfig) {
     this.setState({
+      isLoadingWords: true,
       searchConfig: searchConfig,
     }, () => this.updateDisplayedWords());
   }
 
   setPage (newPage) {
     this.setState({
+      isLoadingWords: true,
       currentPage: newPage,
     }, () => this.updateDisplayedWords());
   }
@@ -208,6 +212,7 @@ class App extends Component {
 
         <MainDisplay
           dictionaryInfo={ this.dictionaryInfo }
+          isLoadingWords={ this.state.isLoadingWords }
           wordsToDisplay={ this.state.displayedWords }
           wordsAreFiltered={ this.isUsingFilter }
           wordsInCurrentList={ this.state.wordsInCurrentList }