adjust threshold instead of debouncing (#3578)

hubmapconsortium · Oct 22, 2024 · 8f136b3 · 8f136b3
1 parent bb07051
commit 8f136b3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/CHANGELOG-fix-shaking-viewport.md b/CHANGELOG-fix-shaking-viewport.md
@@ -0,0 +1 @@
+- Fix bug where expanding a processed dataset section leads to a shaking viewport.
diff --git a/...tic/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx b/...tic/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
@@ -18,6 +18,7 @@ import useProcessedDataStore from '../store';
 import { DetailPageSection } from '../../DetailPageSection';
 
 const iconPlaceholder = <Skeleton variant="circular" width={24} height={24} animation="pulse" />;
+const inViewThreshold = 0.1;
 
 function LoadingFallback() {
   return <Skeleton variant="rectangular" height={200} />;
@@ -27,19 +28,22 @@ export function ProcessedDatasetAccordion({ children }: PropsWithChildren) {
   const { defaultExpanded, dataset, sectionDataset, conf, isLoading } = useProcessedDatasetContext();
   const visualizationIcon = conf ? <VisualizationIcon /> : null;
   const track = useTrackEntityPageEvent();
+  const [threshold, setThreshold] = useState(inViewThreshold);
 
   const { setCurrentDataset, removeVisibleDataset } = useProcessedDataStore((state) => ({
     setCurrentDataset: state.setCurrentDataset,
     removeVisibleDataset: state.removeFromVisibleDatasets,
   }));
   const { ref } = useInView({
-    threshold: 0,
+    threshold,
     initialInView: false,
     onChange: (visible) => {
       if (visible && dataset) {
+        setThreshold(0);
         setCurrentDataset(dataset);
       }
       if (!visible) {
+        setThreshold(inViewThreshold);
         removeVisibleDataset(sectionDataset.hubmap_id);
       }
     },