Fix flicker on new entity select

packages/editor/src/components/properties/CoreNodeEditor.tsx

@@ -64,7 +64,6 @@ const visibleInputGroupStyle = {
 export const CoreNodeEditor = (props) => {
   const { t } = useTranslation()
   const editorState = useHookstate(getMutableState(EditorState))
-  const selectionState = useHookstate(getMutableState(SelectionState))
 
   useOptionalComponent(props.entity, VisibleComponent)
 
@@ -84,7 +83,9 @@ export const CoreNodeEditor = (props) => {
       >
         <button
           onClick={() => {
-            const currentEntity = selectionState.selectedEntities.value[0]
+            const entities = getMutableState(SelectionState).selectedEntities.value
+            const currentEntity = entities[0]
+
             const currentState = editorState.lockPropertiesPanel.value
             if (currentState) {
               getMutableState(EditorState).lockPropertiesPanel.set('' as EntityUUID)

packages/editor/src/components/properties/PropertiesPanelContainer.tsx

@@ -24,10 +24,10 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { useHookstate } from '@hookstate/core'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
+import { Entity, UndefinedEntity } from '@etherealengine/engine/src/ecs/classes/Entity'
 import {
   ComponentJSONIDMap,
   getAllComponents,
@@ -110,15 +110,21 @@ const EntityEditor = (props: { entity: Entity; multiEdit: boolean }) => {
 export const PropertiesPanelContainer = () => {
   const selectionState = useHookstate(getMutableState(SelectionState))
   const editorState = useHookstate(getMutableState(EditorState))
-  const selectedEntities = selectionState.selectedEntities.value
-  const { t } = useTranslation()
+  const [entity, setEntity] = React.useState<Entity | null>(UndefinedEntity)
+  const [multiEdit, setMultiEdit] = React.useState<boolean>(false)
 
-  const lockedNode = editorState.lockPropertiesPanel.value
-  const multiEdit = selectedEntities.length > 1
+  const { t } = useTranslation()
 
-  const entity = lockedNode
-    ? UUIDComponent.entitiesByUUID[lockedNode] ?? lockedNode
-    : selectedEntities[selectedEntities.length - 1]
+  useEffect(() => {
+    const selectedEntities = selectionState.selectedEntities.value
+    const lockedNode = editorState.lockPropertiesPanel.value
+    setMultiEdit(selectedEntities.length > 1)
+    setEntity(
+      lockedNode
+        ? UUIDComponent.entitiesByUUID[lockedNode] ?? lockedNode
+        : selectedEntities[selectedEntities.length - 1]
+    )
+  }, [selectionState.selectedEntities])
 
   const materialID = useHookstate(getMutableState(MaterialSelectionState)).selectedMaterial.value