From f79a274b9de1c20512c7a7b295cd90094bfeb0d4 Mon Sep 17 00:00:00 2001
From: Leo Hong <5917188+low-earth-orbit@users.noreply.github.com>
Date: Sun, 25 Aug 2024 20:34:30 -0300
Subject: [PATCH] Fix window size loading

---
 app/page.tsx          |  7 +------
 components/Canvas.tsx | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 7c780ae..edd5e06 100644
--- 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
index 5b7e95e..1f3fc07 100644
--- 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