chore: Reduce loading jank in sidebar (#1294)

app/components/Sidebar/components/Collections.js

@@ -10,6 +10,7 @@ import { newDocumentUrl } from 'utils/routeHelpers';
 import Header from './Header';
 import SidebarLink from './SidebarLink';
 import CollectionLink from './CollectionLink';
+import CollectionsLoading from './CollectionsLoading';
 import Fade from 'components/Fade';
 
 import CollectionsStore from 'stores/CollectionsStore';
@@ -55,8 +56,7 @@ class Collections extends React.Component<Props> {
     const { collections, ui, documents } = this.props;
 
     const content = (
-      <Flex column>
+      <React.Fragment>
-        <Header>Collections</Header>
         {collections.orderedData.map(collection => (
           <CollectionLink
             key={collection.id}
@@ -74,12 +74,22 @@ class Collections extends React.Component<Props> {
           label="New collection…"
           exact
         />
-      </Flex>
+      </React.Fragment>
     );
 
     return (
-      collections.isLoaded &&
+      <Flex column>
-      (this.isPreloaded ? content : <Fade>{content}</Fade>)
+        <Header>Collections</Header>
+        {collections.isLoaded ? (
+          this.isPreloaded ? (
+            content
+          ) : (
+            <Fade>{content}</Fade>
+          )
+        ) : (
+          <CollectionsLoading />
+        )}
+      </Flex>
     );
   }
 }

app/components/Sidebar/components/CollectionsLoading.js

@@ -0,0 +1,21 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import Mask from 'components/Mask';
+
+function CollectionsLoading() {
+  return (
+    <Wrapper>
+      <Mask />
+      <Mask />
+      <Mask />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 4px 16px;
+  width: 75%;
+`;
+
+export default CollectionsLoading;