stop spine skeleton loading at every render call

Author: Vladyslav Pohorielov

Extensions/Spine/managers/pixi-spine-manager.ts

@@ -47,20 +47,20 @@ namespace gdjs {
 
       try {
         const game = this._resourceLoader.getRuntimeGame();
-        const embeddedResourcesMapping = game.getEmbeddedResourcesNames(
+        const embeddedResourcesNames = game.getEmbeddedResourcesNames(
           resource.name
         );
 
         // there should be exactly one file which is pointing to atlas
-        if (embeddedResourcesMapping.length !== 1) {
+        if (embeddedResourcesNames.length !== 1) {
           return logger.error(
             `Unable to find atlas metadata for resource spine json ${resourceName}.`
           );
         }
 
         const atlasResourceName = game.resolveEmbeddedResource(
           resource.name,
-          embeddedResourcesMapping[0]
+          embeddedResourcesNames[0]
         );
         const spineAtlas = await this._spineAtlasManager.getOrLoad(
           atlasResourceName

newIDE/app/src/ObjectEditor/Editors/SpineEditor.js

@@ -108,7 +108,7 @@ const SpineEditor = ({
     },
     [getResource]
   );
-  const getSkeleton = React.useCallback(
+  const loadSkeleton = React.useCallback(
     (spineResourceName: string) => {
       const jsonResourcesMapping = getEmbeddedResourcesMapping(
         spineResourceName
@@ -132,25 +132,43 @@ const SpineEditor = ({
       )
         return Promise.resolve(undefined);
 
-      return PixiResourcesLoader.getSpineData(project, spineResourceName).then(
-        newSkeleton => {
-          setSkeleton(newSkeleton);
+      return PixiResourcesLoader.getSpineData(project, spineResourceName);
+    },
+    [project, getEmbeddedResourcesMapping]
+  );
+  const [sourceSelectOptions, setSourceSelectOptions] = React.useState<Array<Object>>([]);
+  const spineResourceName = properties.get('spineResourceName').getValue();
 
-          return newSkeleton;
+  React.useEffect(
+    () => {
+      (async () => {
+        const skeleton = await loadSkeleton(spineResourceName);
+
+        setSkeleton(skeleton);
+
+        if (skeleton) {
+          setSourceSelectOptions(
+            skeleton.animations.map(animation => (
+              <SelectOption
+                key={animation.name}
+                value={animation.name}
+                label={animation.name}
+                shouldNotTranslate
+              />
+            ))
+          );
         }
-      );
+      })();
     },
-    [project, getEmbeddedResourcesMapping]
+    [loadSkeleton, setSourceSelectOptions, spineResourceName]
   );
-  getSkeleton(properties.get('spineResourceName').getValue());
 
   const onChangeSpineResourceName = React.useCallback(
-    (spineResourceName: string) => {
-      getSkeleton(spineResourceName).then(newSkeleton => {
-        spineConfiguration.removeAllAnimations();
-      });
+    () => {
+      spineConfiguration.removeAllAnimations();
+      forceUpdate();
     },
-    [getSkeleton, spineConfiguration]
+    [forceUpdate, spineConfiguration]
   );
 
   const scanNewAnimations = React.useCallback(
@@ -314,19 +332,6 @@ const SpineEditor = ({
     ]
   );
 
-  const sourceSelectOptions = skeleton
-    ? skeleton.animations.map(animation => {
-        return (
-          <SelectOption
-            key={animation.name}
-            value={animation.name}
-            label={animation.name}
-            shouldNotTranslate
-          />
-        );
-      })
-    : [];
-
   return (
     <>
       <ScrollView ref={scrollView}>