Merge pull request #1461 from visualize-admin/feat/improve-resizing-behavior

feat: Improve resizing behavior

Author: bprusinowski

Diff for: CHANGELOG.md

@@ -16,6 +16,7 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
   - Sidebar content no longer gets unmounted when data is being re-fetched (e.g. when interacting with time slider in temporal X axes)
   - Reduced content layout shift when changing chart type
   - Filters are now correctly applied when adding a new chart
+  - Charts now resize immediately to remove a "laggy" feeling caused by calling transitions multiple times
 - Style
   - Introduced smaller UI improvements in the options panel
 - Performance

Diff for: app/charts/shared/containers.tsx

@@ -22,10 +22,15 @@ export const ChartContainer = ({ children }: { children: ReactNode }) => {
       }
 
       const sel = select(ref.current);
-      (enableTransition
-        ? sel.transition().duration(transitionDuration)
-        : sel
-      ).style("height", `${height}px`);
+
+      if (enableTransition) {
+        sel
+          .transition()
+          .duration(transitionDuration)
+          .style("height", `${height}px`);
+      } else {
+        sel.style("height", `${height}px`);
+      }
     }
   }, [height, enableTransition, transitionDuration]);
 

Diff for: app/charts/shared/use-width.tsx

@@ -1,46 +1,56 @@
-import { createContext, ReactNode, useContext } from "react";
+import React, { createContext, ReactNode, useContext } from "react";
 
+import { useTransitionStore } from "@/stores/transition";
 import { useResizeObserver } from "@/utils/use-resize-observer";
+import { useTimedPrevious } from "@/utils/use-timed-previous";
 
-export interface Margins {
+export type Margins = {
   top: number;
   right: number;
   bottom: number;
   left: number;
-}
-export type Width = number;
-export interface Bounds {
+};
+
+export type Bounds = {
   width: number;
   height: number;
   margins: Margins;
   chartWidth: number;
   chartHeight: number;
-}
+};
 
-const INITIAL_WIDTH: Width = 1;
+const INITIAL_WIDTH = 1;
 
 export const Observer = ({ children }: { children: ReactNode }) => {
-  const [resizeRef, width] = useResizeObserver<HTMLDivElement>();
+  const [ref, width] = useResizeObserver<HTMLDivElement>();
+  const prev = useTimedPrevious(width, 500);
+  const isResizing = prev !== width;
+  const setEnableTransition = useTransitionStore((state) => state.setEnable);
+
+  React.useEffect(
+    () => setEnableTransition(!isResizing),
+    [isResizing, setEnableTransition]
+  );
 
   return (
-    <div ref={resizeRef}>
-      {width > 1 ? (
-        <ChartObserverContext.Provider value={width}>
-          {children}
-        </ChartObserverContext.Provider>
-      ) : null}
+    <div ref={ref} style={{ display: "flex", minHeight: "100%" }}>
+      <ChartObserverContext.Provider value={width}>
+        {children}
+      </ChartObserverContext.Provider>
     </div>
   );
 };
 
-const ChartObserverContext = createContext<Width>(INITIAL_WIDTH);
+const ChartObserverContext = createContext(INITIAL_WIDTH);
 
 export const useWidth = () => {
   const ctx = useContext(ChartObserverContext);
+
   if (ctx === undefined) {
     throw Error(
       "You need to wrap your component in <ChartObserverContextProvider /> to useWidth()"
     );
   }
+
   return ctx;
 };

Diff for: app/utils/use-timed-previous.ts

@@ -0,0 +1,16 @@
+import React from "react";
+
+export const useTimedPrevious = <T>(value: T, duration: number): T => {
+  const [previousValue, setPreviousValue] = React.useState<T>(value);
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setPreviousValue(value);
+    }, duration);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [value, duration]);
+
+  return previousValue;
+};