From dff228f7b09def7ca646d971f3e37e69834a8bf8 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Thu, 5 Dec 2024 11:01:30 +0100 Subject: [PATCH 1/2] catalog-react: fix filters re-render on small screens Signed-off-by: Vincenzo Scamporlino --- .../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(false); From 95092a64367c5035a53eba66ccc596d3567c109a Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Thu, 5 Dec 2024 11:07:10 +0100 Subject: [PATCH 2/2] catalog-react: filters changesets Signed-off-by: Vincenzo Scamporlino --- .changeset/silver-actors-care.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silver-actors-care.md diff --git a/.changeset/silver-actors-care.md b/.changeset/silver-actors-care.md new file mode 100644 index 0000000000..5391a1d57b --- /dev/null +++ b/.changeset/silver-actors-care.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Fixed an issue where `` would re-render its children on page load for smaller screens, potentially leading to unnecessary additional backend requests.