From 4faf47fc9d91e980665f403edd2aa09d64c7aa7c Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 20 Dec 2021 12:33:58 +0100
Subject: [PATCH] Reduce rerendering caused by useMediaQuery & fix expand
 button

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/layout/Sidebar/Bar.tsx                | 21 ++++----
 .../src/layout/Sidebar/Sidebar.stories.tsx    | 51 ++++++++++---------
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx
index b0f6e4b712..d893bc3e5b 100644
--- a/packages/core-components/src/layout/Sidebar/Bar.tsx
+++ b/packages/core-components/src/layout/Sidebar/Bar.tsx
@@ -103,15 +103,14 @@ const DesktopSidebar = ({
   children,
 }: PropsWithChildren<Props>) => {
   const classes = useStyles();
-  const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.down('md'),
+  const isSmallScreen = useMediaQuery<BackstageTheme>(
+    theme => theme.breakpoints.down('md'),
+    { noSsr: true },
   );
   const [state, setState] = useState(State.Closed);
   const hoverTimerRef = useRef<number>();
   const { isPinned } = useContext(SidebarPinStateContext);
 
-  useEffect(() => clearTimeout(hoverTimerRef.current));
-
   const handleOpen = () => {
     if (isPinned || disableExpandOnHover) {
       return;
@@ -152,9 +151,9 @@ const DesktopSidebar = ({
 
   const setOpen = (open: boolean) => {
     if (open) {
-      handleOpen();
+      setState(State.Open);
     } else {
-      handleClose();
+      setState(State.Closed);
     }
   };
 
@@ -187,8 +186,9 @@ export const Sidebar = ({
   closeDelayMs,
   disableExpandOnHover,
 }: React.PropsWithChildren<Props>) => {
-  const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.down('xs'),
+  const isMobileScreen = useMediaQuery<BackstageTheme>(
+    theme => theme.breakpoints.down('xs'),
+    { noSsr: true },
   );
 
   return isMobileScreen ? (
@@ -214,8 +214,9 @@ export const SidebarExpandButton = () => {
   const classes = useStyles();
   const { isOpen, setOpen } = useContext(SidebarContext);
   const { isPinned } = useContext(SidebarPinStateContext);
-  const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.down('md'),
+  const isSmallScreen = useMediaQuery<BackstageTheme>(
+    theme => theme.breakpoints.down('md'),
+    { noSsr: true },
   );
 
   if (isPinned || isSmallScreen || !setOpen) {
diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
index 53e8e88a1d..0636cac134 100644
--- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
+++ b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
@@ -77,34 +77,37 @@ export const SampleScalableSidebar = () => (
     <Sidebar disableExpandOnHover>
       <SidebarSearchField onSearch={handleSearch} to="/search" />
       <SidebarDivider />
-      <SidebarItem icon={MenuBookIcon} text="Catalog">
-        <SidebarSubmenu title="Catalog">
-          <SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
-          <SidebarSubmenuItem title="APIs" to="/2" icon={CloudQueueIcon} />
-          <SidebarSubmenuItem title="Components" to="/3" icon={AppsIcon} />
-          <SidebarSubmenuItem
-            title="Misc"
-            to="/6"
-            icon={AcUnitIcon}
-            dropdownItems={[
-              {
-                title: 'Lorem Ipsum',
-                to: '/7',
-              },
-              {
-                title: 'Lorem Ipsum',
-                to: '/8',
-              },
-            ]}
-          />
-        </SidebarSubmenu>
-      </SidebarItem>
-      <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
-      <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
+      <SidebarGroup label="Menu" icon={<MenuIcon />}>
+        <SidebarItem icon={MenuBookIcon} text="Catalog">
+          <SidebarSubmenu title="Catalog">
+            <SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
+            <SidebarSubmenuItem title="APIs" to="/2" icon={CloudQueueIcon} />
+            <SidebarSubmenuItem title="Components" to="/3" icon={AppsIcon} />
+            <SidebarSubmenuItem
+              title="Misc"
+              to="/6"
+              icon={AcUnitIcon}
+              dropdownItems={[
+                {
+                  title: 'Lorem Ipsum',
+                  to: '/7',
+                },
+                {
+                  title: 'Lorem Ipsum',
+                  to: '/8',
+                },
+              ]}
+            />
+          </SidebarSubmenu>
+        </SidebarItem>
+        <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
+        <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
+      </SidebarGroup>
       <SidebarDivider />
       <SidebarIntro />
       <SidebarSpace />
       <SidebarExpandButton />
     </Sidebar>
+    Test
   </SidebarPage>
 );