From 488e469e336ac2188f516399cb6e5c712d9754e2 Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Tue, 10 Jan 2023 18:32:06 +0000
Subject: [PATCH] Desktop: Fixes #7610: Optimise sidebar rendering speed

---
 packages/app-desktop/gui/Sidebar/Sidebar.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/app-desktop/gui/Sidebar/Sidebar.tsx b/packages/app-desktop/gui/Sidebar/Sidebar.tsx
index 8b4314273..fb2c1d6a0 100644
--- a/packages/app-desktop/gui/Sidebar/Sidebar.tsx
+++ b/packages/app-desktop/gui/Sidebar/Sidebar.tsx
@@ -135,8 +135,7 @@ const SidebarComponent = (props: Props) => {
 	tagItemsOrder_.current = [];
 
 	const rootRef = useRef(null);
-	const anchorItemRefs = useRef<Record<string, any>>(null);
-	anchorItemRefs.current = {};
+	const anchorItemRefs = useRef<Record<string, any>>({});
 
 	// This whole component is a bit of a mess and rather than passing
 	// a plugins prop around, not knowing how it's going to affect
@@ -695,6 +694,11 @@ const SidebarComponent = (props: Props) => {
 		})
 	);
 
+	const foldersStyle = useMemo(() => {
+		return { display: props.folderHeaderIsExpanded ? 'block' : 'none', paddingBottom: 10 };
+	}, [props.folderHeaderIsExpanded]);
+
+
 	if (props.folders.length) {
 		const allNotesSelected = props.notesParentType === 'SmartFilter' && props.selectedSmartFilterId === ALL_NOTES_FILTER_ID;
 		const result = shared.renderFolders(props, renderFolderItem);
@@ -704,7 +708,7 @@ const SidebarComponent = (props: Props) => {
 			<div
 				className={`folders ${props.folderHeaderIsExpanded ? 'expanded' : ''}`}
 				key="folder_items"
-				style={{ display: props.folderHeaderIsExpanded ? 'block' : 'none', paddingBottom: 10 }}
+				style={foldersStyle}
 			>
 				{folderItems}
 			</div>