Improved loading animations

frontend/components/AtlasPreviewLoading/AtlasPreviewLoading.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 import styles from './AtlasPreviewLoading.scss';
 import classNames from 'classnames/bind';
@@ -6,13 +7,39 @@ const cx = classNames.bind(styles);
 
 import { randomInteger } from 'utils/random';
 
-export default (props) => {
+const randomValues = Array.from(new Array(5), () => `${randomInteger(85, 100)}%`);
+
+export default (_props) => {
   return (
-    <div className={ cx(styles.container, styles.animated) }>
-      <div className={ cx(styles.mask, styles.header) } style={{ width: `${randomInteger(65,80)}%` }}>&nbsp;</div>
-      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
-      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
-      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
-    </div>
+    <ReactCSSTransitionGroup
+      transitionName="fadeIn"
+      transitionAppear
+      transitionEnter
+      transitionLeave
+      transitionAppearTimeout={ 0 }
+      transitionEnterTimeout={ 0 }
+      transitionLeaveTimeout={ 0 }
+    >
+      <div>
+        <div className={ cx(styles.container, styles.animated) }>
+          <div
+            className={ cx(styles.mask, styles.header) }
+            style={{ width: randomValues[0] }}
+          >&nbsp;</div>
+          <div
+            className={ cx(styles.mask, styles.bodyText) }
+            style={{ width: randomValues[1] }}
+          >&nbsp;</div>
+          <div
+            className={ cx(styles.mask, styles.bodyText) }
+            style={{ width: randomValues[2] }}
+          >&nbsp;</div>
+          <div
+            className={ cx(styles.mask, styles.bodyText) }
+            style={{ width: randomValues[3] }}
+          >&nbsp;</div>
+        </div>
+      </div>
+    </ReactCSSTransitionGroup>
   );
-};
+};

frontend/index.js

@@ -13,6 +13,7 @@ import stores from 'stores';
 import 'normalize.css/normalize.css';
 import 'styles/base.scss';
 import 'styles/fonts.css';
+import 'styles/transitions.scss';
 import 'styles/hljs-github-gist.scss';
 import 'styles/codemirror.scss';
 

frontend/scenes/Atlas/Atlas.js

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { observer } from 'mobx-react';
-import { Link, browserHistory } from 'react-router';
-import keydown, { keydownScoped } from 'react-keydown';
+import { browserHistory } from 'react-router';
+import keydown from 'react-keydown';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import _ from 'lodash';
 
 import store from './AtlasStore';
 
-import Layout, { Title, HeaderAction } from 'components/Layout';
+import Layout, { Title } from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import DocumentList from 'components/DocumentList';
@@ -19,10 +20,13 @@ import styles from './Atlas.scss';
 @keydown(['c'])
 @observer
 class Atlas extends React.Component {
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+  }
+
   componentDidMount = () => {
     const { id } = this.props.params;
     store.fetchCollection(id, data => {
-
       // Forward directly to root document
       if (data.type === 'atlas') {
         browserHistory.replace(data.navigationTree.url);
@@ -72,22 +76,30 @@ class Atlas extends React.Component {
         titleText={ titleText }
       >
         <CenteredContent>
-          { store.isFetching ? (
-            <AtlasPreviewLoading />
-          ) : (
-            <div className={ styles.container }>
-              <div className={ styles.atlasDetails }>
-                <h2>{ collection.name }</h2>
-                <blockquote>
-                  { collection.description }
-                </blockquote>
+          <ReactCSSTransitionGroup
+            transitionName="fadeIn"
+            transitionAppear
+            transitionAppearTimeout={ 0 }
+            transitionEnterTimeout={ 0 }
+            transitionLeaveTimeout={ 0 }
+          >
+            { store.isFetching ? (
+              <AtlasPreviewLoading />
+            ) : (
+              <div className={ styles.container }>
+                <div className={ styles.atlasDetails }>
+                  <h2>{ collection.name }</h2>
+                  <blockquote>
+                    { collection.description }
+                  </blockquote>
+                </div>
+
+                <Divider />
+
+                <DocumentList documents={ collection.recentDocuments } preview />
               </div>
-
-              <Divider />
-
-              <DocumentList documents={ collection.recentDocuments } preview />
-            </div>
-          ) }
+            ) }
+          </ReactCSSTransitionGroup>
         </CenteredContent>
       </Layout>
     );

frontend/scenes/Dashboard/Dashboard.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 import store from './DashboardStore';
 
@@ -25,11 +26,21 @@ class Dashboard extends React.Component {
         <Layout>
           <CenteredContent>
             <Flex column auto>
-              { store.isFetching ? (
-                <AtlasPreviewLoading />
-              ) : store.collections && store.collections.map((collection) => {
-                return (<AtlasPreview key={ collection.id } data={ collection } />);
-              }) }
+              <ReactCSSTransitionGroup
+                transitionName="fadeIn"
+                transitionAppear
+                transitionAppearTimeout={ 0 }
+                transitionEnterTimeout={ 0 }
+                transitionLeaveTimeout={ 0 }
+              >
+                { store.isFetching ? (
+                  <AtlasPreviewLoading />
+                ) : (
+                  store.collections && store.collections.map((collection) => {
+                    return (<AtlasPreview key={ collection.id } data={ collection } />);
+                  })
+                ) }
+              </ReactCSSTransitionGroup>
             </Flex>
           </CenteredContent>
         </Layout>

frontend/scenes/DocumentScene/DocumentScene.js

@@ -186,11 +186,7 @@ class DocumentScene extends React.Component {
             ) }
             <Flex auto justify="center" className={ styles.content }>
               <CenteredContent>
-                { this.store.updatingContent ? (
-                  <AtlasPreviewLoading />
-                ) : (
-                  <Document document={ doc } />
-                ) }
+                <Document document={ doc } />
               </CenteredContent>
             </Flex>
           </Flex>

frontend/styles/transitions.scss

@@ -0,0 +1,29 @@
+:global {
+  .fadeIn-appear {
+    opacity: 0.01;
+  }
+
+  .fadeIn-appear.fadeIn-appear-active {
+    opacity: 1;
+    transition: opacity 250ms ease-in;
+    transition-delay: 0.35s;
+  }
+
+  .fadeIn-enter {
+    opacity: 0.01;
+  }
+
+  .fadeIn-enter.fadeIn-enter-active {
+    opacity: 1;
+    transition: opacity 200ms ease-in;
+  }
+
+  .fadeIn-leave {
+    opacity: 1;
+  }
+
+  .fadeIn-leave.fadeIn-leave-active {
+    opacity: 0.01;
+    transition: opacity 200ms ease-in;
+  }
+}

package.json

@@ -124,6 +124,7 @@
     "randomstring": "1.1.5",
     "raw-loader": "^0.5.1",
     "react": "15.3.1",
+    "react-addons-css-transition-group": "15.3.1",
     "react-codemirror": "0.2.6",
     "react-dom": "15.1.0",
     "react-dropzone": "3.6.0",