feat: add Vite configuration with custom plugins and server settings

src/app/components/room-avatar/RoomAvatar.tsx

@@ -6,6 +6,7 @@ import { joinRuleToIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';
 import { useAuthenticatedMediaUrl } from '../../hooks/useAuthenticatedMediaUrl';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { cacheAvatar, isAvatarCached, pruneAvatarCache } from '../../utils/avatarCache';
 
 type RoomAvatarProps = {
   roomId: string;
@@ -15,13 +16,18 @@ type RoomAvatarProps = {
 };
 export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps) {
   const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(() => isAvatarCached(src));
   const useAuthentication = useMediaAuthentication();
   const authenticatedSrc = useAuthenticatedMediaUrl(src, useAuthentication);
 
   const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
     evt.currentTarget.setAttribute('data-image-loaded', 'true');
+    setLoaded(true);
+    cacheAvatar(src);
+    pruneAvatarCache();
   };
 
+  // No src or error - show fallback only
   if (!authenticatedSrc || error) {
     return (
       <AvatarFallback
@@ -33,15 +39,45 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
     );
   }
 
+  // If already cached, show image directly without fallback flash
+  if (loaded) {
+    return (
+      <AvatarImage
+        className={css.RoomAvatar}
+        src={authenticatedSrc}
+        alt={alt}
+        onError={() => setError(true)}
+        onLoad={handleLoad}
+        draggable={false}
+        data-image-loaded="true"
+      />
+    );
+  }
+
+  // Loading state - render fallback with image overlay
   return (
-    <AvatarImage
-      className={css.RoomAvatar}
-      src={authenticatedSrc}
-      alt={alt}
-      onError={() => setError(true)}
-      onLoad={handleLoad}
-      draggable={false}
-    />
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <AvatarFallback
+        style={{ 
+          backgroundColor: colorMXID(roomId ?? ''), 
+          color: color.Surface.Container,
+          position: 'absolute',
+          inset: 0,
+        }}
+        className={css.RoomAvatar}
+      >
+        {renderFallback()}
+      </AvatarFallback>
+      <AvatarImage
+        className={css.RoomAvatar}
+        style={{ position: 'relative', zIndex: 1 }}
+        src={authenticatedSrc}
+        alt={alt}
+        onError={() => setError(true)}
+        onLoad={handleLoad}
+        draggable={false}
+      />
+    </div>
   );
 }