🆙 Added fix when slow download speeds clothes have problems

src/common/layout/LayoutAvatarImageView.tsx

@@ -1,6 +1,7 @@
-import { AvatarScaleType, AvatarSetType, GetAvatarRenderManager } from '@nitrots/nitro-renderer';
+import { AvatarScaleType, AvatarSetType, GetAvatarRenderManager, NitroEventType } from '@nitrots/nitro-renderer';
 import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react';
 import { Base, BaseProps } from '../Base';
+import { useNitroEvent } from '../../hooks/events';
 
 const AVATAR_IMAGE_CACHE: Map<string, string> = new Map();
 
@@ -18,7 +19,14 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
     const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
     const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
     const [ isReady, setIsReady ] = useState<boolean>(false);
+    const [ updateId, setUpdateId ] = useState<number>(0);
     const isDisposed = useRef(false);
+    const isPlaceholderRef = useRef(false);
+
+    useNitroEvent(NitroEventType.AVATAR_ASSET_LOADED, () =>
+    {
+        if(isPlaceholderRef.current) setUpdateId(prev => prev + 1);
+    });
 
     const getClassNames = useMemo(() =>
     {
@@ -55,15 +63,22 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 
         if(AVATAR_IMAGE_CACHE.has(figureKey))
         {
+            isPlaceholderRef.current = false;
             setAvatarUrl(AVATAR_IMAGE_CACHE.get(figureKey));
         }
         else
         {
-            const resetFigure = (_figure: string) =>
+            const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
+                resetFigure: (figure: string) =>
                 {
                     if(isDisposed.current) return;
 
-                const avatarImage = GetAvatarRenderManager().createAvatarImage(_figure, AvatarScaleType.LARGE, gender, { resetFigure: (figure: string) => resetFigure(figure), dispose: null, disposed: false });
+                    isPlaceholderRef.current = false;
+                    setUpdateId(prev => prev + 1);
+                },
+                dispose: null,
+                disposed: false
+            });
 
             let setType = AvatarSetType.FULL;
 
@@ -75,17 +90,22 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 
             if(imageUrl && !isDisposed.current)
             {
-                    if(!avatarImage.isPlaceholder()) AVATAR_IMAGE_CACHE.set(figureKey, imageUrl);
+                if(!avatarImage.isPlaceholder())
+                {
+                    AVATAR_IMAGE_CACHE.set(figureKey, imageUrl);
+                    isPlaceholderRef.current = false;
+                }
+                else
+                {
+                    isPlaceholderRef.current = true;
+                }
 
                 setAvatarUrl(imageUrl);
             }
 
             avatarImage.dispose();
-            };
-
-            resetFigure(figure);
         }
-    }, [ figure, gender, direction, headOnly, isReady ]);
+    }, [ figure, gender, direction, headOnly, isReady, updateId ]);
 
     useEffect(() =>
     {