diff --git a/src/app/components/room-avatar/RoomAvatar.tsx b/src/app/components/room-avatar/RoomAvatar.tsx index 356d9dbc2..33f9f6881 100644 --- 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 ( { + setError(false); + }, [src]); + const handleLoad: ReactEventHandler = (evt) => { evt.currentTarget.setAttribute('data-image-loaded', 'true'); }; diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts index d1de6e890..3308e6813 100644 --- a/src/app/hooks/useUserProfile.ts +++ b/src/app/hooks/useUserProfile.ts @@ -32,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', @@ -61,7 +62,7 @@ const normalizeInfo = (info: any): UserProfile => { pronouns: info['io.fsky.nyx.pronouns'], timezone: info['us.cloke.msc4175.tz'] || info['m.tz'], bio: - (info['gay.fomx.biography'] satisfies MSC4440Bio)['m.text'][0].body || + msc4440Bio?.['m.text']?.[0]?.body || info['moe.sable.app.bio'] || info['chat.commet.profile_bio'], status: info['chat.commet.profile_status'], @@ -103,7 +104,10 @@ 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;