Loading Animation

package.json

@@ -75,6 +75,7 @@
     "markup-it": "git+https://github.com/cassiozen/markup-it.git",
     "pluralize": "^3.0.0",
     "prismjs": "^1.5.1",
+    "react-addons-css-transition-group": "^15.3.1",
     "react-portal": "^2.2.1",
     "selection-position": "^1.0.0",
     "semaphore": "^1.0.5",

src/components/UI/loader/Loader.css

@@ -33,9 +33,7 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  -webkit-animation: loader 0.6s linear;
   animation: loader 0.6s linear;
-  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   border-radius: 500rem;
   border-color: #767676 transparent transparent;
@@ -93,3 +91,25 @@
 .disabled {
   display: none;
 }
+
+/*Animations*/
+.animateItem{
+  position: absolute;
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+.enter {
+  opacity: 0.01;
+}
+.enter.enterActive {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+.leave {
+  opacity: 1;
+}
+.leave.leaveActive {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}

src/components/UI/loader/Loader.js

@@ -1,21 +1,69 @@
 import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styles from './Loader.css';
 
-export default function Loader({ active, style, className = '', children }) {
-  // Class names
-  let classNames = styles.loader;
-  if (active) {
-    classNames += ` ${styles.active}`;
-  }
-  if (className.length > 0) {
-    classNames += ` ${className}`;
+export default class Loader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentItem: 0,
+    };
+    this.setAnimation = this.setAnimation.bind(this);
+    this.renderChild = this.renderChild.bind(this);
   }
 
-  // Render child text
-  let child;
-  if (children) {
-    child = <div className={styles.text}>{children}</div>;
+  componengWillUnmount() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
   }
 
-  return <div className={classNames} style={style}>{child}</div>;
+  setAnimation() {
+    if (this.interval) return;
+    console.log("Passed");
+    const { children } = this.props;
+
+    this.interval = setInterval(() => {
+
+      const nextItem = (this.state.currentItem === children.length - 1) ? 0 : this.state.currentItem + 1;
+      this.setState({ currentItem: nextItem });
+    }, 5000);
+  }
+
+  renderChild() {
+    const { children } = this.props;
+    const { currentItem } = this.state;
+    if (!children) {
+      return null;
+    } else if (typeof children == 'string') {
+      return <div className={styles.text}>{children}</div>;
+    } else if (Array.isArray(children)) {
+      this.setAnimation();
+      return <div className={styles.text}>
+        <ReactCSSTransitionGroup
+            transitionName={styles}
+            transitionEnterTimeout={500}
+            transitionLeaveTimeout={500}
+        >
+          <div key={currentItem} className={styles.animateItem}>{children[currentItem]}</div>
+        </ReactCSSTransitionGroup>
+      </div>;
+    }
+  }
+
+  render() {
+    const { active, style, className = '' } = this.props;
+
+    // Class names
+    let classNames = styles.loader;
+    if (active) {
+      classNames += ` ${styles.active}`;
+    }
+    if (className.length > 0) {
+      classNames += ` ${className}`;
+    }
+
+    return <div className={classNames} style={style}>{this.renderChild()}</div>;
+
+  }
 }

src/containers/CollectionPage.js

@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { loadEntries } from '../actions/entries';
 import { selectEntries } from '../reducers';
+import { Loader } from '../components/UI';
 import EntryListing from '../components/EntryListing';
 
 class DashboardPage extends React.Component {
@@ -28,7 +29,11 @@ class DashboardPage extends React.Component {
     }
 
     return <div>
-      {entries ? <EntryListing collection={collection} entries={entries}/> : 'Loading entries...'}
+      {entries ?
+        <EntryListing collection={collection} entries={entries}/>
+        :
+        <Loader active>{['Loading Entries', 'Caching Entries', 'This might take several minutes']}</Loader>
+      }
     </div>;
   }
 }