From 4e46513e23671cf2158c45926f082f608b506f3f Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Tue, 3 Jun 2025 14:35:46 -0700
Subject: [PATCH] Make 2d, image, video conditionally render

---
 .../app/src/pages/PageEnigma/PageEditor.tsx   | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
index e0b3954caa..228a0489f0 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
@@ -330,9 +330,9 @@ export const PageEditor = () => {
   }, [appTabId.value, editorEngine]);
 
   const display3d = appTabId.value === "3D" ? "block" : "none";
-  const display2d = appTabId.value === "2D" ? "block" : "none";
-  const displayVideo = appTabId.value === "VIDEO" ? "block" : "none";
-  const displayImage = appTabId.value === "IMAGE" ? "block" : "none";
+  const display2d = appTabId.value === "2D";
+  const displayVideo = appTabId.value === "VIDEO";
+  const displayImage = appTabId.value === "IMAGE";
 
   return (
     <div className="w-screen">
@@ -438,23 +438,30 @@ export const PageEditor = () => {
           </div>
         </div>
       </>
-      <KonvaCanvasContainer style={{ display: display2d }}>
-        <KonvaRootComponent className="h-full w-full" />
-      </KonvaCanvasContainer>
 
-      <div style={{ display: displayVideo }}>
-        <ImageToVideo
-          imageMediaId={topNavMediaId.value}
-          imageUrl={topNavMediaUrl.value}
-        />
-      </div>
+      {display2d && (
+        <KonvaCanvasContainer>
+          <KonvaRootComponent className="h-full w-full" />
+        </KonvaCanvasContainer>
+      )}
 
-      <div style={{ display: displayImage }}>
-        <TextToImage
-          imageMediaId={topNavMediaId.value}
-          imageUrl={topNavMediaUrl.value}
-        />
-      </div>
+      {displayVideo && (
+        <div>
+          <ImageToVideo
+            imageMediaId={topNavMediaId.value}
+            imageUrl={topNavMediaUrl.value}
+          />
+        </div>
+      )}
+
+      {displayImage && (
+        <div>
+          <TextToImage
+            imageMediaId={topNavMediaId.value}
+            imageUrl={topNavMediaUrl.value}
+          />
+        </div>
+      )}
 
       <LoginModal
         onClose={() => { }}