From dff228f7b09def7ca646d971f3e37e69834a8bf8 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Thu, 5 Dec 2024 11:01:30 +0100
Subject: [PATCH] catalog-react: fix filters re-render on small screens

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../components/CatalogFilterLayout/CatalogFilterLayout.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
index ee51020cbb..793d4741ad 100644
--- a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
+++ b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
@@ -34,8 +34,10 @@ export const Filters = (props: {
     drawerAnchor?: 'left' | 'right' | 'top' | 'bottom';
   };
 }) => {
-  const isScreenSmallerThanBreakpoint = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),
+  const isScreenSmallerThanBreakpoint = useMediaQuery(
+    (theme: Theme) =>
+      theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),
+    { noSsr: true },
   );
   const theme = useTheme();
   const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);