From ccedea55d6a631f1d64e070e687cc407bc9e8e9c Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 30 May 2020 12:50:08 -0700
Subject: [PATCH] chore: Reduce loading jank in sidebar (#1294)

---
 .../Sidebar/components/Collections.js         | 20 +++++++++++++-----
 .../Sidebar/components/CollectionsLoading.js  | 21 +++++++++++++++++++
 2 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 app/components/Sidebar/components/CollectionsLoading.js

diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js
index 1811826fd..3eb03cbba 100644
--- a/app/components/Sidebar/components/Collections.js
+++ b/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>
-        <Header>Collections</Header>
+      <React.Fragment>
         {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 &&
-      (this.isPreloaded ? content : <Fade>{content}</Fade>)
+      <Flex column>
+        <Header>Collections</Header>
+        {collections.isLoaded ? (
+          this.isPreloaded ? (
+            content
+          ) : (
+            <Fade>{content}</Fade>
+          )
+        ) : (
+          <CollectionsLoading />
+        )}
+      </Flex>
     );
   }
 }
diff --git a/app/components/Sidebar/components/CollectionsLoading.js b/app/components/Sidebar/components/CollectionsLoading.js
new file mode 100644
index 000000000..f3e488949
--- /dev/null
+++ b/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;