feat: gltf loaders splitted

src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx

@@ -5,7 +5,7 @@ import { GLTFLoader } from 'three-stdlib';
 
 import { Model } from 'src/components/Models/Model';
 import { BaseModelProps } from 'src/types';
-import { useEmotion, useGltfLoader } from 'src/services';
+import { useEmotion, useGltfCachedLoader } from 'src/services';
 import { Emotion } from 'src/components/Avatar/Avatar.component';
 
 export interface MultipleAnimationModelProps extends BaseModelProps {
@@ -30,7 +30,7 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
   const [loadedAnimations, setLoadedAnimations] = useState<Record<string, AnimationClip>>({});
   const [activeAction, setActiveAction] = useState<AnimationAction | null>(null);
 
-  const { scene } = useGltfLoader(modelSrc);
+  const { scene } = useGltfCachedLoader(modelSrc);
   const { nodes } = useGraph(scene);
 
   useEffect(() => {

src/services/Models.service.tsx

@@ -219,7 +219,21 @@ const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.5/');
 loader.setDRACOLoader(dracoLoader);
 
-export const useGltfLoader = (source: Blob | string): GLTF => {
+export const useGltfLoader = (source: Blob | string): GLTF =>
+  suspend(
+    async () => {
+      if (source instanceof Blob) {
+        const buffer = await source.arrayBuffer();
+        return (await loader.parseAsync(buffer, '')) as unknown as GLTF;
+      }
+
+      return loader.loadAsync(source);
+    },
+    [source],
+    { lifespan: 100 }
+  );
+
+export const useGltfCachedLoader = (source: Blob | string): GLTF => {
   const cachedGltf = useRef<Map<string, GLTF>>(new Map<string, GLTF>());
 
   return suspend(async (): Promise<GLTF> => {