update rest of functions to promises and calls from react

src/library/characterManager.js

@@ -338,7 +338,6 @@ export class CharacterManager {
       });
     }
 
-
     /**
      * Loads traits from an NFT object metadata into the avatar.
      *
@@ -359,7 +358,6 @@ export class CharacterManager {
             // Load traits into the avatar using the _loadTraits method
             this._loadTraits(traits, fullAvatarReplace);
 
-            // Resolve the Promise (without a value, as you mentioned it's not needed)
             resolve();
           } catch (error) {
             // Reject the Promise with an error message if there's an error during trait retrieval
@@ -375,26 +373,101 @@ export class CharacterManager {
       });
     }
 
+    /**
+     * Loads initial traits based on manifest data.
+     *
+     * @returns {Promise<void>} A Promise that resolves if successful,
+     *                         or rejects with an error message if not.
+     */
+    loadInitialTraits() {
+      return new Promise((resolve, reject) => {
+        // Check if manifest data is available
+        if (this.manifestData) {
+          // Load initial traits using the _loadTraits method
+          this._loadTraits(this.manifestData.getInitialTraits());
 
-
-    async loadInitialTraits(){
-      if (this.manifestData){
-        this._loadTraits(this.manifestData.getInitialTraits());
-      }
-      else{
-        console.error ("No manifest was loaded, random traits cannot be loaded.")
-      }
+          resolve();
+        } else {
+          // Manifest data is not available, log an error and reject the Promise
+          const errorMessage = "No manifest was loaded, initial traits cannot be loaded.";
+          console.error(errorMessage);
+          reject(new Error(errorMessage));
+        }
+      });
     }
-    async loadTrait(groupTraitID, traitID){
-      const selectedTrait = this.manifestData.getTraitOption(groupTraitID, traitID);
-      if (selectedTrait)
-        await this._loadTraits(getAsArray(selectedTrait));
+
+    /**
+     * Loads a specific trait based on group and trait IDs.
+     *
+     * @param {string} groupTraitID - The ID of the trait group.
+     * @param {string} traitID - The ID of the specific trait.
+     * @returns {Promise<void>} A Promise that resolves if successful,
+     *                         or rejects with an error message if not.
+     */
+    loadTrait(groupTraitID, traitID) {
+      return new Promise(async (resolve, reject) => {
+        // Check if manifest data is available
+        if (this.manifestData) {
+          try {
+            // Retrieve the selected trait using manifest data
+            const selectedTrait = this.manifestData.getTraitOption(groupTraitID, traitID);
+
+            // If the trait is found, load it into the avatar using the _loadTraits method
+            if (selectedTrait) {
+              await this._loadTraits(getAsArray(selectedTrait));
+            }
+
+            resolve();
+          } catch (error) {
+            // Reject the Promise with an error message if there's an error during trait retrieval
+            console.error("Error loading specific trait:", error.message);
+            reject(new Error("Failed to load specific trait."));
+          }
+        } else {
+          // Manifest data is not available, log an error and reject the Promise
+          const errorMessage = "No manifest was loaded, specific trait cannot be loaded.";
+          console.error(errorMessage);
+          reject(new Error(errorMessage));
+        }
+      });
     }
-    async loadCustomTrait(groupTraitID, url){
-      const selectedTrait = this.manifestData.getCustomTraitOption(groupTraitID, url);
-      if (selectedTrait)
-        await this._loadTraits(getAsArray(selectedTrait))
+
+    /**
+     * Loads a custom trait based on group and URL.
+     *
+     * @param {string} groupTraitID - The ID of the trait group.
+     * @param {string} url - The URL associated with the custom trait.
+     * @returns {Promise<void>} A Promise that resolves if successful,
+     *                         or rejects with an error message if not.
+     */
+    loadCustomTrait(groupTraitID, url) {
+      return new Promise(async (resolve, reject) => {
+        // Check if manifest data is available
+        if (this.manifestData) {
+          try {
+            // Retrieve the selected custom trait using manifest data
+            const selectedTrait = this.manifestData.getCustomTraitOption(groupTraitID, url);
+
+            // If the custom trait is found, load it into the avatar using the _loadTraits method
+            if (selectedTrait) {
+              await this._loadTraits(getAsArray(selectedTrait));
+            }
+
+            resolve();
+          } catch (error) {
+            // Reject the Promise with an error message if there's an error during custom trait retrieval
+            console.error("Error loading custom trait:", error.message);
+            reject(new Error("Failed to load custom trait."));
+          }
+        } else {
+          // Manifest data is not available, log an error and reject the Promise
+          const errorMessage = "No manifest was loaded, custom trait cannot be loaded.";
+          console.error(errorMessage);
+          reject(new Error(errorMessage));
+        }
+      });
     }
+
     async loadCustomTexture(groupTraitID, url){
       const model = this.avatar[groupTraitID]?.model;
       if (model){
@@ -431,10 +504,17 @@ export class CharacterManager {
     getCurrentOptimizerCharacter(){
       return this.avatar["CUSTOM"]?.vrm;
     }
-    async loadOptimizerCharacter(url){
-      await this.loadCustomTrait("CUSTOM", url);
+
+    /**
+     * Loads an optimized character based on a custom trait URL.
+     *
+     * @param {string} url - The URL associated with the custom trait.
+     * @returns {Promise<void>} A Promise that resolves if successful,
+     *                         or rejects with an error message if not.
+     */
+    loadOptimizerCharacter(url) {
+      return this.loadCustomTrait("CUSTOM", url);
     }
-
     async loadManifest(url){
       this.manifest = await this._fetchManifest(url)
       if (this.manifest){

src/pages/Appearance.jsx

@@ -33,7 +33,6 @@ function Appearance() {
     !isMute && playSound('backNextButton');
     characterManager.removeCurrentCharacter();
     characterManager.removeCurrentManifest();
-    //resetAvatar()
     setViewMode(ViewMode.CREATE)
   }
 
@@ -84,13 +83,27 @@ function Appearance() {
   }
   const handleVRMDrop = (file) =>{
     if (traitGroupName != ""){
+      setIsLoading(true);
       const path = URL.createObjectURL(file);
-      characterManager.loadCustomTrait(traitGroupName, path);
+      characterManager.loadCustomTrait(traitGroupName, path).then(()=>{
+        setIsLoading(false);
+      })
     }
     else{
       console.warn("Please select a group trait first.")
     }
   }
+  const selectTrait = (trait) => {
+    setIsLoading(true);
+    characterManager.loadTrait(trait.traitGroup.trait, trait.id).then(()=>{
+      setIsLoading(false);
+      setSelectedTrait(trait);
+    })
+  }
+  const removeTrait = (traitGroupName) =>{
+    characterManager.removeTrait(traitGroupName);
+    setSelectedTrait(null);
+  }
   const handleJsonDrop = (files) => {
     const filesArray = Array.from(files);
     const jsonDataArray = [];
@@ -173,7 +186,7 @@ function Appearance() {
   }
 
 
-  const uploadTrait = async() =>{
+  const uploadTrait = () =>{
     var input = document.createElement('input');
     input.type = 'file';
     input.accept=".vrm"
@@ -182,8 +195,10 @@ function Appearance() {
       var file = e.target.files[0]; 
       if (file.name.endsWith(".vrm")){
         const url = URL.createObjectURL(file);
-        characterManager.loadCustomTrait(traitGroupName,url)
-        setSelectedTrait(null);
+        setIsLoading(true);
+        characterManager.loadCustomTrait(traitGroupName,url).then(()=>{
+          setIsLoading(false);
+        })
       }
     }
     input.click();
@@ -236,10 +251,7 @@ function Appearance() {
                     key={"no-trait"}
                     className={`${styles["selectorButton"]}`}
                     icon={cancel}
-                    onClick={() => {
-                      characterManager.removeTrait(traitGroupName);
-                      setSelectedTrait(null);
-                    }}
+                    onClick={() => {removeTrait(traitGroupName)}}
                   >
                     <TokenBox
                       size={56}
@@ -258,11 +270,7 @@ function Appearance() {
                   <div
                     key={trait.id}
                     className={`${styles["selectorButton"]}`}
-                    onClick={() => {
-                      // setIsLoading(true);
-                      characterManager.loadTrait(trait.traitGroup.trait, trait.id)
-                      setSelectedTrait(trait);
-                    }}
+                    onClick={()=>{selectTrait(trait)}}
                   >
                     <TokenBox
                       size={56}

src/pages/Create.jsx

@@ -14,7 +14,7 @@ function Create() {
   // Translate hook
   const {t} = useContext(LanguageContext);
 
-  const { setViewMode } = React.useContext(ViewContext)
+  const { setViewMode, setIsLoading, isLoading } = React.useContext(ViewContext)
   const { playSound } = React.useContext(SoundContext)
   const { isMute } = React.useContext(AudioContext)
   const { manifest, characterManager } = React.useContext(SceneContext)
@@ -43,8 +43,11 @@ function Create() {
   }
 
   const selectClass = async (index) => {
+    setIsLoading(true)
     await characterManager.loadManifest(manifest[index].manifest);
-    characterManager.loadInitialTraits();
+    characterManager.loadInitialTraits().then(()=>{
+      setIsLoading(false)
+    })
     setViewMode(ViewMode.APPEARANCE)
     !isMute && playSound('classSelect');