feat(editor2): lazy init level map

Author: guansss

src/components/editor2/action/LevelMap.tsx

@@ -61,9 +61,19 @@ const activeActionLocationAtom = atom(
   },
 )
 
+// Defer initializing the map until it's visible. It's handled via atoms instead of
+// component states to avoid unnecessary rerenders when the map has already been initialized.
+const initializedAtom = atom(false)
+const shouldInitializeAtom = atom(
+  (get) =>
+    !get(initializedAtom) && get(editorAtoms.selectorPanelMode) === 'map',
+)
+
 export const LevelMap: FC<LevelMapProps> = memo(({ className }) => {
   const t = useTranslation()
   const { data: levels } = useLevels()
+  const [initialized, setInitialized] = useAtom(initializedAtom)
+  const shouldInitialize = useAtomValue(shouldInitializeAtom)
   const stageName = useAtomValue(stageNameAtom)
   const [activeLocation, setActiveLocation] = useAtom(activeActionLocationAtom)
   const level = useMemo(
@@ -120,6 +130,16 @@ export const LevelMap: FC<LevelMapProps> = memo(({ className }) => {
     }
   }, [iframeWindow])
 
+  useEffect(() => {
+    if (shouldInitialize) {
+      setInitialized(true)
+    }
+  }, [shouldInitialize, setInitialized])
+
+  if (!initialized) {
+    return null
+  }
+
   return (
     <div className={clsx('relative flex-grow', className)}>
       {level && (