From f491268c626a6e88c31704c4b4fee86ca872520d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 3 Nov 2024 12:05:55 +0800
Subject: [PATCH] Fix(Render): Fix can not render device node when entering the
 page

---
 .../Playground/Output/Preview/Render.tsx      | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/renderer/src/components/Playground/Output/Preview/Render.tsx b/src/renderer/src/components/Playground/Output/Preview/Render.tsx
index 10da69c..27e079c 100644
--- a/src/renderer/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/renderer/src/components/Playground/Output/Preview/Render.tsx
@@ -45,23 +45,7 @@ const Render = ({
     const [isLoaded, setIsLoaded] = useState(false)
     const [selectedDevice, setSelectedDevice] = useState<DeviceName>('Pixel 7')
     const [isRotate, setIsRotate] = useState(false)
-
-    const nodes: Node<SimulationData>[] = [
-        {
-            id: 'device',
-            type: 'simulation',
-            position: { x: 0, y: 0 },
-            data: {
-                deviceWidth: devices[selectedDevice].width,
-                deviceHeight: devices[selectedDevice].height,
-                isRotate,
-                iframeKey,
-                iframeRef,
-                iframeUrl,
-                setIsLoaded
-            }
-        }
-    ]
+    const [nodes, setNodes] = useState<Node<SimulationData>[]>([])
 
     const handleOnRotateDevice = () => {
         setIsRotate(!isRotate)
@@ -98,6 +82,25 @@ const Render = ({
         loadGlobalVariables()
     }, [isLoaded, globalJsVariables, globalCssVariables])
 
+    useEffect(() => {
+        setNodes([
+            {
+                id: 'device',
+                type: 'simulation',
+                position: { x: 0, y: 0 },
+                data: {
+                    deviceWidth: devices[selectedDevice].width,
+                    deviceHeight: devices[selectedDevice].height,
+                    isRotate,
+                    iframeKey,
+                    iframeRef,
+                    iframeUrl,
+                    setIsLoaded
+                }
+            }
+        ])
+    }, [])
+
     return mobileMode ? (
         <>
             <ReactFlow