fix: recover profile and avatar loading

Just-Insane · Just-Insane · commit fe3900a65756 · 2026-03-28T01:13:31.000-04:00
diff --git a/src/app/components/room-avatar/RoomAvatar.tsx b/src/app/components/room-avatar/RoomAvatar.tsx
@@ -1,6 +1,6 @@
 import { JoinRule } from '$types/matrix-sdk';
 import { AvatarFallback, Icon, Icons, color } from 'folds';
-import { ComponentProps, ReactNode, forwardRef, useState } from 'react';
+import { ComponentProps, ReactNode, forwardRef, useEffect, useState } from 'react';
 import { getRoomIconSrc } from '$utils/room';
 import colorMXID from '$utils/colorMXID';
 import * as css from './RoomAvatar.css';
@@ -17,6 +17,10 @@ type RoomAvatarProps = {
 export function RoomAvatar({ roomId, src, alt, renderFallback, uniformIcons }: RoomAvatarProps) {
   const [error, setError] = useState(false);
 
+  useEffect(() => {
+    setError(false);
+  }, [src]);
+
   if (!src || error) {
     return (
       <AvatarFallback
diff --git a/src/app/components/user-avatar/UserAvatar.tsx b/src/app/components/user-avatar/UserAvatar.tsx
@@ -1,5 +1,5 @@
 import { AvatarFallback, AvatarImage, color } from 'folds';
-import { ReactEventHandler, ReactNode, useState } from 'react';
+import { ReactEventHandler, ReactNode, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import colorMXID from '$utils/colorMXID';
 import * as css from './UserAvatar.css';
@@ -14,6 +14,10 @@ type UserAvatarProps = {
 export function UserAvatar({ className, userId, src, alt, renderFallback }: UserAvatarProps) {
   const [error, setError] = useState(false);
 
+  useEffect(() => {
+    setError(false);
+  }, [src]);
+
   const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
     evt.currentTarget.setAttribute('data-image-loaded', 'true');
   };
diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts
@@ -7,10 +7,15 @@ import colorMXID from '$utils/colorMXID';
 import { profilesCacheAtom } from '$state/userRoomProfile';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
+import { MSC1767Text } from '$types/matrix/common';
 import { useMatrixClient } from './useMatrixClient';
 
 const inFlightProfiles = new Map<string, Promise<any>>();
 
+export type MSC4440Bio = {
+  'm.text': Array<MSC1767Text>;
+};
+
 export type UserProfile = {
   avatarUrl?: string;
   displayName?: string;
@@ -27,6 +32,7 @@ export type UserProfile = {
 };
 
 const normalizeInfo = (info: any): UserProfile => {
+  const msc4440Bio = info['gay.fomx.biography'] as MSC4440Bio | undefined;
   const knownKeys = new Set([
     'avatar_url',
     'displayname',
@@ -35,6 +41,7 @@ const normalizeInfo = (info: any): UserProfile => {
     'm.tz',
     'moe.sable.app.bio',
     'chat.commet.profile_bio',
+    'gay.fomx.biography',
     'chat.commet.profile_banner',
     'chat.commet.profile_status',
     'moe.sable.app.name_color',
@@ -54,7 +61,7 @@ const normalizeInfo = (info: any): UserProfile => {
     displayName: info.displayname,
     pronouns: info['io.fsky.nyx.pronouns'],
     timezone: info['us.cloke.msc4175.tz'] || info['m.tz'],
-    bio: info['moe.sable.app.bio'] || info['chat.commet.profile_bio'],
+    bio: msc4440Bio?.['m.text']?.[0]?.body || info['moe.sable.app.bio'] || info['chat.commet.profile_bio'],
     status: info['chat.commet.profile_status'],
     bannerUrl: info['chat.commet.profile_banner'],
     nameColor: info['moe.sable.app.name_color'],
@@ -94,7 +101,11 @@ export const useUserProfile = (
   const cached = useAtomValue(userSelector);
   const setGlobalProfiles = useSetAtom(profilesCacheAtom);
 
-  const needsFetch = !!userId && userId !== 'undefined' && !cached?._fetched;
+  const hasOnlyFetchedMarker =
+    cached?._fetched === true && Object.keys(cached).every((key) => key === '_fetched');
+
+  const needsFetch =
+    !!userId && userId !== 'undefined' && (!cached?._fetched || hasOnlyFetchedMarker);
 
   useEffect(() => {
     if (!needsFetch) return undefined;
