From 873d4dade6844d88d6dd05d61d7620dde1a48d86 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Thu, 22 Jun 2023 09:50:40 +1000
Subject: [PATCH] Prevent fullscreen break when loading scene (#3828)

---
 .../components/Scenes/SceneDetails/Scene.tsx  | 55 ++++++++++++-------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index d0057476b..85e88a278 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -541,6 +541,17 @@ const SceneLoader: React.FC = () => {
   const { configuration } = useContext(ConfigurationContext);
   const { data, loading, error } = useFindScene(id ?? "");
 
+  const [scene, setScene] = useState<GQL.SceneDataFragment | undefined>(
+    data?.findScene ?? undefined
+  );
+
+  // only update scene when loading is done
+  useEffect(() => {
+    if (!loading) {
+      setScene(data?.findScene ?? undefined);
+    }
+  }, [data, loading]);
+
   const queryParams = useMemo(
     () => new URLSearchParams(location.search),
     [location.search]
@@ -752,32 +763,34 @@ const SceneLoader: React.FC = () => {
     }
   }
 
-  if (loading) return <LoadingIndicator />;
+  if (!scene && loading) return <LoadingIndicator />;
   if (error) return <ErrorMessage error={error.message} />;
 
-  const scene = data?.findScene;
-  if (!scene) return <ErrorMessage error={`No scene found with id ${id}.`} />;
+  if (!loading && !scene)
+    return <ErrorMessage error={`No scene found with id ${id}.`} />;
 
   return (
     <div className="row">
-      <ScenePage
-        scene={scene}
-        setTimestamp={setTimestamp}
-        queueScenes={queueScenes ?? []}
-        queueStart={queueStart}
-        onDelete={onDelete}
-        onQueueNext={onQueueNext}
-        onQueuePrevious={onQueuePrevious}
-        onQueueRandom={onQueueRandom}
-        continuePlaylist={continuePlaylist}
-        loadScene={loadScene}
-        queueHasMoreScenes={queueHasMoreScenes}
-        onQueueLessScenes={onQueueLessScenes}
-        onQueueMoreScenes={onQueueMoreScenes}
-        collapsed={collapsed}
-        setCollapsed={setCollapsed}
-        setContinuePlaylist={setContinuePlaylist}
-      />
+      {scene && (
+        <ScenePage
+          scene={scene}
+          setTimestamp={setTimestamp}
+          queueScenes={queueScenes ?? []}
+          queueStart={queueStart}
+          onDelete={onDelete}
+          onQueueNext={onQueueNext}
+          onQueuePrevious={onQueuePrevious}
+          onQueueRandom={onQueueRandom}
+          continuePlaylist={continuePlaylist}
+          loadScene={loadScene}
+          queueHasMoreScenes={queueHasMoreScenes}
+          onQueueLessScenes={onQueueLessScenes}
+          onQueueMoreScenes={onQueueMoreScenes}
+          collapsed={collapsed}
+          setCollapsed={setCollapsed}
+          setContinuePlaylist={setContinuePlaylist}
+        />
+      )}
       <div className={`scene-player-container ${collapsed ? "expanded" : ""}`}>
         <ScenePlayer
           key="ScenePlayer"