From ef682dadb13221acc0830f83b584864cb1c27b8c Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Wed, 12 Jun 2024 15:34:40 +0530
Subject: [PATCH] smoothening animatio

---
 apps/web/app/(canvas)/canvas.tsx      | 5 +++--
 apps/web/app/(canvas)/canvas/page.tsx | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/(canvas)/canvas.tsx b/apps/web/app/(canvas)/canvas.tsx
index ef4ceb7f..9ec57d6d 100644
--- a/apps/web/app/(canvas)/canvas.tsx
+++ b/apps/web/app/(canvas)/canvas.tsx
@@ -8,8 +8,9 @@ import createEmbedsFromUrl from "./lib/createEmbeds";
 import { loadRemoteSnapshot } from "./lib/loadSnap";
 import { SaveStatus } from "./savesnap";
 import { getAssetUrls } from '@tldraw/assets/selfHosted'
+import { memo } from 'react';
 
-export default function Canvas(){
+export const Canvas = memo(()=>{
   const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({
     status: "loading",
   });
@@ -51,4 +52,4 @@ export default function Canvas(){
       </div>
     </Tldraw>
   );
-}
+})
diff --git a/apps/web/app/(canvas)/canvas/page.tsx b/apps/web/app/(canvas)/canvas/page.tsx
index 552f8708..7abfa583 100644
--- a/apps/web/app/(canvas)/canvas/page.tsx
+++ b/apps/web/app/(canvas)/canvas/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 // import Canvas from "./_components/canvas";
-import Canvas from "../canvas";
+import {Canvas} from "../canvas";
 import React, { useState } from "react";
 // import ReactTextareaAutosize from "react-textarea-autosize";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
@@ -21,7 +21,7 @@ function page() {
     <div className={`h-screen w-full ${ !fullScreen && "px-4 py-6"} transition-all`}>
       <div>
         <PanelGroup className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`} direction="horizontal">
-          <Panel onExpand={()=> {setFullScreen(false)}} onCollapse={()=> {setFullScreen(true)}} defaultSize={30} collapsible={true} minSize={22}>
+          <Panel onExpand={()=> {setTimeout(()=> setFullScreen(false), 50)}} onCollapse={()=> {setTimeout(()=> setFullScreen(true), 50)}} defaultSize={30} collapsible={true} minSize={22}>
             <div className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen": "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}>
               <div className="flex items-center justify-between bg-[#2C3439] px-4 py-2 text-lg font-medium text-[#989EA4]">
                 Change Filters