Merge pull request #27997 from backstage/catalog-layout-rerender-small-screen

Catalog: fix CatalogFilterLayout.Filters unmounting children

.changeset/silver-actors-care.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed an issue where `<CatalogFilterLayout.Filters />` would re-render its children on page load for smaller screens, potentially leading to unnecessary additional backend requests.

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);