From fe559baeff2be387429a35d8b3438a20764933c4 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 27 Sep 2017 21:04:13 -0700
Subject: [PATCH] Removes a react render loop when hovering over sidebar

---
 .../Layout/components/SidebarCollections.js   | 59 ++++++++++---------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/frontend/components/Layout/components/SidebarCollections.js b/frontend/components/Layout/components/SidebarCollections.js
index eb5b8802a..bed25cff1 100644
--- a/frontend/components/Layout/components/SidebarCollections.js
+++ b/frontend/components/Layout/components/SidebarCollections.js
@@ -53,39 +53,32 @@ type Props = {
 }
 
 @observer class CollectionLink extends React.Component {
-  @observable isHovering = false;
   @observable menuOpen = false;
 
-  handleHover = () => (this.isHovering = true);
-  handleBlur = () => {
-    if (!this.menuOpen) this.isHovering = false;
-  };
-
   render() {
     const { history, collection, activeDocument, ui } = this.props;
 
     return (
-      <DropToImport
+      <StyledDropToImport
         key={collection.id}
         history={history}
         collectionId={collection.id}
         activeClassName="activeDropZone"
-        onMouseEnter={this.handleHover}
-        onMouseLeave={this.handleBlur}
+        menuOpen={this.menuOpen}
       >
         <SidebarLink key={collection.id} to={collection.url}>
           <Flex justify="space-between">
             {collection.name}
 
-            {(this.isHovering || this.menuOpen) &&
-              <CollectionAction>
-                <CollectionMenu
-                  history={history}
-                  collection={collection}
-                  onShow={() => (this.menuOpen = true)}
-                  onClose={() => (this.menuOpen = false)}
-                />
-              </CollectionAction>}
+            <CollectionAction>
+              <CollectionMenu
+                history={history}
+                collection={collection}
+                onShow={() => (this.menuOpen = true)}
+                onClose={() => (this.menuOpen = false)}
+                open={this.menuOpen}
+              />
+            </CollectionAction>
           </Flex>
 
           {collection.id === ui.activeCollectionId &&
@@ -101,7 +94,7 @@ type Props = {
               ))}
             </Children>}
         </SidebarLink>
-      </DropToImport>
+      </StyledDropToImport>
     );
   }
 }
@@ -156,14 +149,6 @@ const DocumentLink = observer((props: DocumentLinkProps) => {
   );
 });
 
-const Header = styled(Flex)`
-  font-size: 11px;
-  font-weight: ${fontWeight.semiBold};
-  text-transform: uppercase;
-  color: ${color.slate};
-  letter-spacing: 0.04em;
-`;
-
 const CollectionAction = styled.a`
   color: ${color.slate};
   svg { opacity: .75; }
@@ -173,6 +158,26 @@ const CollectionAction = styled.a`
   }
 `;
 
+const StyledDropToImport = styled(DropToImport)`
+  ${CollectionAction} {
+    display: ${props => (props.menuOpen ? 'inline' : 'none')};
+  }
+
+  &:hover {
+    ${CollectionAction} {
+      display: inline;
+    }
+  }
+`;
+
+const Header = styled(Flex)`
+  font-size: 11px;
+  font-weight: ${fontWeight.semiBold};
+  text-transform: uppercase;
+  color: ${color.slate};
+  letter-spacing: 0.04em;
+`;
+
 const Children = styled(Flex)`
   margin-left: 20px;
 `;