Improve loader for word list

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 } />

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'>
 

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

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 }