Fix window size loading

low-earth-orbit · Aug 25, 2024 · f79a274 · f79a274
1 parent eda0345
commit f79a274
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,10 +1,5 @@
 import Canvas from "@/components/Canvas";
-import { MantineProvider } from "@mantine/core";
 
 export default function Home() {
-  return (
-    <MantineProvider>
-      <Canvas />
-    </MantineProvider>
-  );
+  return <Canvas />;
 }
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
@@ -13,12 +13,10 @@ export default function Canvas() {
   const [tool, setTool] = useState<string>("pen");
   const [lines, setLines] = useState<LineType[]>([]);
   const isDrawing = useRef<boolean>(false);
-  const [stageSize, setStageSize] = useState<{ width: number; height: number }>(
-    {
-      width: 0,
-      height: 0,
-    }
-  );
+  const [stageSize, setStageSize] = useState<{
+    width: number;
+    height: number;
+  }>();
 
   const handleMouseDown = (e: any) => {
     isDrawing.current = true;
@@ -54,12 +52,20 @@ export default function Canvas() {
       });
     };
 
+    // Update the size on mount
+    handleResize();
+
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
 
+  // component has not finished loading the window size
+  if (!stageSize) {
+    return null;
+  }
+
   return (
     <div>
       <Stage