refactor: improve conditional rendering on panel buttons (#5365)

add render condition on modal buttons

src/frontend/src/modals/IOModal/newModal.tsx

@@ -259,6 +259,7 @@ export default function IOModal({
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
       <BaseModal.Content overflowHidden className="h-full">
+        {open && (
           <div className="flex-max-width h-full">
             <div
               className={cn(
@@ -286,7 +287,9 @@ export default function IOModal({
                       />
                     </Button>
                   </ShadTooltip>
-                {sidebarOpen && <div className="font-semibold">Playground</div>}
+                  {sidebarOpen && (
+                    <div className="font-semibold">Playground</div>
+                  )}
                 </div>
                 {sidebarOpen && (
                   <div className="flex flex-col pl-3">
@@ -370,8 +373,8 @@ export default function IOModal({
                       </button>
                     )}
                     {
-                    nodes.find((node) => node.id === selectedViewField.id)?.data
+                      nodes.find((node) => node.id === selectedViewField.id)
-                      .node.display_name
+                        ?.data.node.display_name
                     }
                   </div>
                   <div className="h-full w-full">
@@ -502,6 +505,7 @@ export default function IOModal({
               </div>
             </div>
           </div>
+        )}
       </BaseModal.Content>
     </BaseModal>
   );

src/frontend/src/modals/apiModal/index.tsx

@@ -54,6 +54,8 @@ export default function ApiModal({
         />
       </BaseModal.Header>
       <BaseModal.Content overflowHidden>
+        {open && (
+          <>
             <CustomAPIGenerator isOpen={open} />
             <CodeTabsComponent
               open={open}
@@ -63,6 +65,8 @@ export default function ApiModal({
               activeTweaks={activeTweaks}
               setActiveTweaks={setActiveTweaks}
             />
+          </>
+        )}
       </BaseModal.Content>
     </BaseModal>
   );

src/frontend/src/modals/shareModal/index.tsx

@@ -221,6 +221,8 @@ export default function ShareModal({
           />
         </BaseModal.Header>
         <BaseModal.Content>
+          {open && (
+            <>
               <div className="w-full rounded-lg border border-border p-4">
                 <EditFlowSettings name={name} description={description} />
               </div>
@@ -242,7 +244,10 @@ export default function ShareModal({
                   }}
                   data-testid="public-checkbox"
                 />
-            <label htmlFor="public" className="export-modal-save-api text-sm">
+                <label
+                  htmlFor="public"
+                  className="export-modal-save-api text-sm"
+                >
                   Set {nameComponent} status to public
                 </label>
               </div>
@@ -250,6 +255,8 @@ export default function ShareModal({
                 <b>Attention:</b> API keys in specified fields are automatically
                 removed upon sharing.
               </span>
+            </>
+          )}
         </BaseModal.Content>
 
         <BaseModal.Footer