Improved loading state

app/components/LoadingListPlaceholder/LoadingListPlaceholder.js

@@ -1,40 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-import { pulsate } from 'shared/styles/animations';
-import { color } from 'shared/styles/constants';
-import Flex from 'shared/components/Flex';
-import Fade from 'components/Fade';
-
-import { randomInteger } from 'shared/random';
-
-const randomValues = Array.from(
-  new Array(5),
-  () => `${randomInteger(85, 100)}%`
-);
-
-export default (props: Object) => {
-  return (
-    <Fade>
-      <Item column auto>
-        <Mask style={{ width: randomValues[0] }} header />
-        <Mask style={{ width: randomValues[1] }} />
-      </Item>
-      <Item column auto>
-        <Mask style={{ width: randomValues[2] }} header />
-        <Mask style={{ width: randomValues[3] }} />
-      </Item>
-    </Fade>
-  );
-};
-
-const Item = styled(Flex)`
-  padding: 18px 0;
-`;
-
-const Mask = styled(Flex)`
-  height: ${props => (props.header ? 28 : 18)}px;
-  margin-bottom: ${props => (props.header ? 18 : 0)}px;
-  background-color: ${color.smoke};
-  animation: ${pulsate} 1.3s infinite;
-`;

app/components/LoadingListPlaceholder/index.js

@@ -1,3 +0,0 @@
-// @flow
-import LoadingListPlaceholder from './LoadingListPlaceholder';
-export default LoadingListPlaceholder;

app/scenes/Collection/Collection.js

@@ -14,7 +14,7 @@ import Collection from 'models/Collection';
 import Search from 'scenes/Search';
 import CenteredContent from 'components/CenteredContent';
 import CollectionIcon from 'components/Icon/CollectionIcon';
-import LoadingListPlaceholder from 'components/LoadingListPlaceholder';
+import { ListPlaceholder } from 'components/LoadingPlaceholder';
 import Button from 'components/Button';
 import HelpText from 'components/HelpText';
 import DocumentList from 'components/DocumentList';
@@ -48,7 +48,7 @@ class CollectionScene extends Component {
   loadContent = async (id: string) => {
     const { collections } = this.props;
 
-    const collection = await collections.fetch(id);
+    const collection = collections.getById(id) || (await collections.fetch(id));
 
     if (collection) {
       this.props.ui.setActiveCollection(collection);
@@ -89,23 +89,36 @@ class CollectionScene extends Component {
   }
 
   render() {
-    if (this.isFetching) return <LoadingListPlaceholder />;
-    if (!this.collection) return this.renderNotFound();
-    if (this.collection.isEmpty) return this.renderEmptyCollection();
+    if (!this.isFetching && !this.collection) {
+      return this.renderNotFound();
+    }
+    if (this.collection && this.collection.isEmpty) {
+      return this.renderEmptyCollection();
+    }
 
     return (
       <CenteredContent>
-        <PageTitle title={this.collection.name} />
-        <Heading>
-          <CollectionIcon color={this.collection.color} size={40} expanded />{' '}
-          {this.collection.name}
-        </Heading>
-        <Subheading>Recently edited</Subheading>
-        <DocumentList
-          documents={this.props.documents.recentlyEditedInCollection(
-            this.collection.id
-          )}
-        />
+        {this.collection ? (
+          <span>
+            <PageTitle title={this.collection.name} />
+            <Heading>
+              <CollectionIcon
+                color={this.collection.color}
+                size={40}
+                expanded
+              />{' '}
+              {this.collection.name}
+            </Heading>
+            <Subheading>Recently edited</Subheading>
+            <DocumentList
+              documents={this.props.documents.recentlyEditedInCollection(
+                this.collection.id
+              )}
+            />
+          </span>
+        ) : (
+          <ListPlaceholder count={5} />
+        )}
       </CenteredContent>
     );
   }