fix Animator component initialization

Author: nicoecheza

packages/@dcl/inspector/src/components/EntityInspector/AnimatorInspector/AnimatorInspector.tsx

@@ -23,29 +23,59 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
   const entity = sdk.sceneContext.getEntityOrNull(entityId)
   const hasAnimator = useHasComponent(entityId, Animator)
   const [componentValue, setComponentValue, isComponentEqual] = useComponentValue<PBAnimator>(entityId, Animator)
+  const [gltfValue] = useComponentValue(entityId, GltfContainer)
 
   const [states, _, updateStates, _2, setStates] = useArrayState<PBAnimationState>(
     componentValue === null ? [] : componentValue.states
   )
 
   useEffect(() => {
-    if (isComponentEqual({ states })) return
-    setComponentValue({ states })
-  }, [states])
+    if (!entity || !gltfValue || hasAnimator) return
+
+    const initializeComponent = async () => {
+      try {
+        await initializeAnimatorComponent(sdk, entityId, [])
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to initialize animator component:', error)
+      }
+    }
+
+    void initializeComponent()
+  }, [entity, gltfValue, hasAnimator])
+
+  useEffect(() => {
+    if (!entity || !gltfValue || !hasAnimator) return
+
+    const loadAnimations = async () => {
+      try {
+        const { animationGroups } = await entity.onGltfContainerLoaded()
+        if (animationGroups.length && (!states.length || states[0].clip !== animationGroups[0].name)) {
+          const newStates = animationGroups.map(($) => ({
+            clip: $.name,
+            playing: false,
+            weight: 1,
+            speed: 1,
+            loop: false,
+            shouldReset: false
+          }))
+          setStates(newStates)
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to load animations:', error)
+      }
+    }
+
+    void loadAnimations()
+  }, [entity, gltfValue, hasAnimator, states])
 
   useEffect(() => {
-    if (entity) {
-      entity
-        .onGltfContainerLoaded()
-        .then(async ({ animationGroups }) => {
-          if (animationGroups.length) {
-            const { states } = await initializeAnimatorComponent(sdk, entityId, animationGroups)
-            setStates(states)
-          }
-        })
-        .catch(() => {})
+    if (isComponentEqual({ states })) {
+      return
     }
-  }, [entity])
+    setComponentValue({ states })
+  }, [states])
 
   const handleRemove = useCallback(async () => {
     sdk.operations.removeComponent(entityId, Animator)

packages/@dcl/inspector/src/components/EntityInspector/AnimatorInspector/utils.ts

@@ -36,9 +36,15 @@ export async function initializeAnimatorComponent(
   }))
 
   const value: PBAnimator = { states }
-  sdk.operations.addComponent(entity, Animator.componentId)
-  sdk.operations.updateValue(Animator, entity, value)
-  await sdk.operations.dispatch()
+
+  try {
+    sdk.operations.addComponent(entity, Animator.componentId)
+    sdk.operations.updateValue(Animator, entity, value)
+    await sdk.operations.dispatch()
+  } catch (error) {
+    console.warn('Failed to initialize animator component:', error)
+    throw error
+  }
 
   return value
 }