Show resize as it happens

Rodeoclash · May 15, 2022 · a5b889c · a5b889c
1 parent dc958cc
commit a5b889c
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/renderer/layouts/WithSidebar.tsx b/src/renderer/layouts/WithSidebar.tsx
@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 
 import { Flex, Box } from '@chakra-ui/react';
 import Draggable from 'react-draggable';
+import { useThrottle } from '@react-hook/throttle';
 
 interface Props {
   children: React.ReactNode;
@@ -20,6 +21,8 @@ export default function WithSidebar({
     number | null
   >(null);
 
+  const [resizeLastAt, setResizeLastAt] = useThrottle<number | null>(null, 10);
+
   const sidebarStylePresetWidths = {
     sm: '40vw',
     lg: '35vw',
@@ -44,12 +47,17 @@ export default function WithSidebar({
   const handleDrag = (event: any) => {
     const newWidth = window.innerWidth - event.clientX;
     setOverrideSidebarWidth(newWidth);
+    setResizeLastAt(Date.now());
   };
 
   const handleDragStop = () => {
     window.dispatchEvent(new Event('resize'));
   };
 
+  React.useEffect(() => {
+    window.dispatchEvent(new Event('resize'));
+  }, [resizeLastAt]);
+
   return (
     <Flex width="100%">
       <Box bgColor="black" flexGrow={1} width={mainWidth}>