perf: wait to update sidebar size on graph

src/js/components/Layout/MainContent.tsx

@@ -8,8 +8,12 @@ export const MainContent = ({ children, isRightSidebarOpen, rightSidebarWidth })
   const {
     toolbarHeight,
     mainContentRef,
+    isResizingLayout,
+    unsavedRightSidebarWidth
   } = React.useContext(LayoutContext);
 
+  const localSidebarWidth = unsavedRightSidebarWidth || rightSidebarWidth;
+
   return (
     // AnimatePresence is required to prevent
     // the content from jumping when the sidebar starts open
@@ -30,8 +34,11 @@ export const MainContent = ({ children, isRightSidebarOpen, rightSidebarWidth })
           "--app-header-height": toolbarHeight,
         }}
         animate={{
-          paddingRight: isRightSidebarOpen ? rightSidebarWidth + "vw" : 0,
-          transition: layoutAnimationTransition
+          paddingRight: isRightSidebarOpen ? localSidebarWidth + "vw" : 0,
+          transition: isResizingLayout ? {
+            ...layoutAnimationTransition,
+            mass: 0,
+          } : layoutAnimationTransition
         }}
       >
         {children}

src/js/components/Layout/RightSidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LayoutContext, layoutAnimationProps } from "./useLayoutState";
+import { LayoutContext, layoutAnimationProps, layoutAnimationTransition } from "./useLayoutState";
 import { AnimatePresence, motion } from 'framer-motion';
 import { XmarkIcon, ChevronRightIcon, PageIcon, PageFillIcon, BlockIcon, BlockFillIcon, GraphIcon, ArrowLeftOnBoxIcon } from '@/Icons/Icons';
 import { Button, IconButton, Box, Collapse, VStack, BoxProps } from '@chakra-ui/react';
@@ -16,15 +16,31 @@ export const RightSidebar = (props: RightSidebarProps) => {
   const { children, rightSidebarWidth, isOpen } = props;
 
   const {
-    toolbarHeight
+    toolbarHeight,
+    isResizingLayout,
+    unsavedRightSidebarWidth
   } = React.useContext(LayoutContext);
 
+  const localSidebarWidth = unsavedRightSidebarWidth || rightSidebarWidth;
+
+  const layoutAnimation = {
+    ...layoutAnimationProps(localSidebarWidth + "vw"),
+    animate: {
+      width: localSidebarWidth + "vw",
+      opacity: 1,
+      transition: isResizingLayout ? {
+        ...layoutAnimationTransition,
+        mass: 0,
+      } : layoutAnimationTransition
+    },
+  }
+
   return (
     <AnimatePresence initial={false}>
       {isOpen && (
         <Box
           as={motion.div}
-          {...layoutAnimationProps(rightSidebarWidth + "vw")}
+          {...layoutAnimation}
           zIndex={1}
           bg="background.floor"
           transitionProperty="background"
@@ -40,7 +56,7 @@ export const RightSidebar = (props: RightSidebarProps) => {
           pt={`calc(${toolbarHeight} + 1rem)`}
           left="auto"
         >
-          <Box width={rightSidebarWidth + "vw"}>
+          <Box width={localSidebarWidth + "vw"}>
             {children}
           </Box>
         </Box>
@@ -93,11 +109,11 @@ export const SidebarItem = ({ title, type, isOpen, onToggle, onRemove, onNavigat
           sx={{ maskImage: "linear-gradient(to right, black, black calc(100% - 1rem), transparent calc(100%))" }}
         >
           {<ChevronRightIcon
-              transform={isOpen ? "rotate(90deg)" : null}
-              transitionProperty="common"
-              transitionDuration="0.15s"
-              transitionTimingFunction="ease-in-out"
-              justifySelf="center" />}
+            transform={isOpen ? "rotate(90deg)" : null}
+            transitionProperty="common"
+            transitionDuration="0.15s"
+            transitionTimingFunction="ease-in-out"
+            justifySelf="center" />}
           {typeIcon(type, isOpen)}
           <Box
             flex="1 1 100%"
@@ -148,7 +164,7 @@ export const SidebarItem = ({ title, type, isOpen, onToggle, onRemove, onNavigat
         unmountOnExit
         zIndex={1}
         px={4}
-        onPointerDown={(e) => {e.stopPropagation()}}
+        onPointerDown={(e) => { e.stopPropagation() }}
       >
         {children}
       </Box>

src/js/components/Layout/RightSidebarResizeControl.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { LayoutContext } from './useLayoutState';
 import { Box, BoxProps } from '@chakra-ui/react';
 
 const MIN_VW = 20;
@@ -22,16 +23,36 @@ interface RightSidebarResizeControlProps extends BoxProps {
 export const RightSidebarResizeControl = (props: RightSidebarResizeControlProps) => {
   const { onResizeSidebar, isRightSidebarOpen, rightSidebarWidth, ...rest } = props;
   const [isDragging, setIsDragging] = React.useState(false);
+  const { unsavedRightSidebarWidth, setUnsavedRightSidebarWidth,
+    setIsResizingLayout
+  } = React.useContext(LayoutContext);
+  const updateWidthTimer = React.useRef<number>();
 
-  const moveHandler = (e) => {
+  const localSidebarWidth = unsavedRightSidebarWidth || rightSidebarWidth;
+
+  const updateWidth = (e) => {
     if (isDragging) {
+      setIsResizingLayout(true);
       e.preventDefault();
-      const calcVW = getVW(e, window);
-      const clampVW = clamp(calcVW, MIN_VW, MAX_VW);
-      onResizeSidebar(clampVW);
+      const vw = getVW(e, window);
+      const clampedVW = clamp(vw, MIN_VW, MAX_VW);
+      setUnsavedRightSidebarWidth(clampedVW);
+
+      if (updateWidthTimer.current) {
+        clearTimeout(updateWidthTimer.current);
+      }
+      updateWidthTimer.current = window.setTimeout(() => {
+        onResizeSidebar(clampedVW);
+        setUnsavedRightSidebarWidth(clampedVW);
+        setIsResizingLayout(false);
+      }, 1000);
     }
   }
 
+  const moveHandler = (e) => {
+    updateWidth(e)
+  }
+
   const mouseUpHandler = () => {
     setIsDragging(false);
   }
@@ -57,7 +78,7 @@ export const RightSidebarResizeControl = (props: RightSidebarResizeControlProps)
       position="fixed"
       zIndex={100}
       opacity={0}
-      right={rightSidebarWidth + "vw"}
+      right={localSidebarWidth + "vw"}
       height="100%"
       cursor="col-resize"
       onMouseDown={() => setIsDragging(true)}

src/js/components/Layout/useLayoutState.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 export const LayoutContext = React.createContext(null);
-export const ContextMenuContext = React.createContext(null);
 
 export const VIEW_MODES = ["regular", "compact"];
 
@@ -34,11 +33,17 @@ export const useLayoutState = () => {
   const mainContentRef = React.useRef();
   const toolbarRef = React.useRef();
   const [mainSidebarWidth, setMainSidebarWidth] = React.useState(300);
+  const [unsavedRightSidebarWidth, setUnsavedRightSidebarWidth] = React.useState();
+  const [isResizingLayout, setIsResizingLayout] = React.useState(false);
   const toolbarHeight = "3rem";
 
   return {
     mainSidebarWidth,
     setMainSidebarWidth,
+    unsavedRightSidebarWidth,
+    setUnsavedRightSidebarWidth,
+    isResizingLayout,
+    setIsResizingLayout,
     toolbarHeight,
     mainContentRef,
     toolbarRef,