From 5b9bdadaec09142975bae53468eda91f8ea6064f Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 16 Feb 2024 12:37:49 +1100
Subject: [PATCH] Mount edit panels only when first entering (#4564)

---
 ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx | 2 +-
 ui/v2.5/src/components/Images/ImageDetails/Image.tsx        | 2 +-
 ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx        | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
index 291aae16b..e827f80a5 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
@@ -264,7 +264,7 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
               isVisible={activeTabKey === "gallery-chapter-panel"}
             />
           </Tab.Pane>
-          <Tab.Pane eventKey="gallery-edit-panel">
+          <Tab.Pane eventKey="gallery-edit-panel" mountOnEnter>
             <GalleryEditPanel
               isVisible={activeTabKey === "gallery-edit-panel"}
               gallery={gallery}
diff --git a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
index 74e692dcd..83557739f 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
@@ -234,7 +234,7 @@ const ImagePage: React.FC<IProps> = ({ image }) => {
           >
             <ImageFileInfoPanel image={image} />
           </Tab.Pane>
-          <Tab.Pane eventKey="image-edit-panel">
+          <Tab.Pane eventKey="image-edit-panel" mountOnEnter>
             <ImageEditPanel
               isVisible={activeTabKey === "image-edit-panel"}
               image={image}
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index 60f8e14e9..b835856d0 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -23,6 +23,7 @@ import {
   queryFindScenesByID,
 } from "src/core/StashService";
 
+import { SceneEditPanel } from "./SceneEditPanel";
 import { ErrorMessage } from "src/components/Shared/ErrorMessage";
 import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { Icon } from "src/components/Shared/Icon";
@@ -59,7 +60,6 @@ const ExternalPlayerButton = lazyComponent(
 const QueueViewer = lazyComponent(() => import("./QueueViewer"));
 const SceneMarkersPanel = lazyComponent(() => import("./SceneMarkersPanel"));
 const SceneFileInfoPanel = lazyComponent(() => import("./SceneFileInfoPanel"));
-const SceneEditPanel = lazyComponent(() => import("./SceneEditPanel"));
 const SceneDetailPanel = lazyComponent(() => import("./SceneDetailPanel"));
 const SceneMoviePanel = lazyComponent(() => import("./SceneMoviePanel"));
 const SceneGalleriesPanel = lazyComponent(
@@ -479,7 +479,7 @@ const ScenePage: React.FC<IProps> = ({
         <Tab.Pane className="file-info-panel" eventKey="scene-file-info-panel">
           <SceneFileInfoPanel scene={scene} />
         </Tab.Pane>
-        <Tab.Pane eventKey="scene-edit-panel">
+        <Tab.Pane eventKey="scene-edit-panel" mountOnEnter>
           <SceneEditPanel
             isVisible={activeTabKey === "scene-edit-panel"}
             scene={scene}