Avoid scroll jump

metabase · Apr 29, 2024 · 0e2c8ab · 0e2c8ab
1 parent 6dbb444
commit 0e2c8ab
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/frontend/src/metabase/browse/components/BrowseModels.tsx b/frontend/src/metabase/browse/components/BrowseModels.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
 import NoResults from "assets/img/no_results.svg";
 import { useSearchQuery } from "metabase/api";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { ContentViewportContext } from "metabase/core/context/ContentViewportContext";
 import Search from "metabase/entities/search";
 import { color } from "metabase/lib/colors";
 import { useDispatch } from "metabase/lib/redux";
@@ -36,6 +37,29 @@ export const BrowseModels = () => {
     setActualModelFilters(initialModelFilters);
   }, [initialModelFilters, setActualModelFilters]);
 
+  const contentViewportElement = useContext(ContentViewportContext);
+  const cachedViewportOverflowYRef = useRef<string>();
+
+  // Set the content viewport to scroll to prevent the page from jumping a little when filters are toggled
+  useEffect(() => {
+    if (!contentViewportElement) {
+      return;
+    }
+    cachedViewportOverflowYRef.current = getComputedStyle(
+      contentViewportElement,
+    ).overflowY;
+    contentViewportElement.style.overflowY = "scroll";
+    return () => {
+      if (!contentViewportElement) {
+        return;
+      }
+      const cachedViewportOverflowY = cachedViewportOverflowYRef.current;
+      if (cachedViewportOverflowY) {
+        contentViewportElement.style.overflowY = cachedViewportOverflowY;
+      }
+    };
+  }, [contentViewportElement]);
+
   return (
     <BrowseContainer>
       <BrowseHeader>