Merge pull request #1594 from visualize-admin/feat/improvements

fix: Disable transitions on initial load
visualize-admin · Jun 11, 2024 · f5fb913 · f5fb913
2 parents e9bf51f + 09c2756
commit f5fb913
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/app/charts/shared/use-size.tsx b/app/charts/shared/use-size.tsx
@@ -7,7 +7,7 @@ import {
 } from "react";
 
 import { useTransitionStore } from "@/stores/transition";
-import { useResizeObserver } from "@/utils/use-resize-observer";
+import { INIT_SIZE, useResizeObserver } from "@/utils/use-resize-observer";
 import { useTimedPrevious } from "@/utils/use-timed-previous";
 
 export type Margins = {
@@ -32,7 +32,10 @@ export const Observer = ({ children }: { children: ReactNode }) => {
   const [ref, width, height] = useResizeObserver<HTMLDivElement>();
   const prevWidth = useTimedPrevious(width, RESIZE_DELAY);
   const prevHeight = useTimedPrevious(height, RESIZE_DELAY);
-  const isResizing = prevWidth !== width || prevHeight !== height;
+  const isResizing =
+    prevWidth !== width ||
+    prevHeight !== height ||
+    (width === INIT_SIZE && height === INIT_SIZE);
   const setEnableTransition = useTransitionStore((state) => state.setEnable);
   useEffect(() => {
     setEnableTransition(!isResizing);

diff --git a/app/utils/use-resize-observer.ts b/app/utils/use-resize-observer.ts
@@ -3,10 +3,12 @@ import { useEventCallback } from "@mui/material";
 import throttle from "lodash/throttle";
 import { useEffect, useRef, useState } from "react";
 
+export const INIT_SIZE = 1;
+
 export const useResizeObserver = <T extends Element>() => {
   const roRef = useRef<ResizeObserver>();
   const elRef = useRef<T>();
-  const [size, changeSize] = useState({ width: 1, height: 1 });
+  const [size, changeSize] = useState({ width: INIT_SIZE, height: INIT_SIZE });
 
   const handleRef = useEventCallback((node: T) => {
     if (!node) {