pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 13:05:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): stop refetching profile art when menus appear (#1954)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:52:26 +02:00
1 parent 26939eccce
commit af5bee9149
1 file changed
+33 -45
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_app/src/features/user/components/modals/user_profile_modal/ProfileMediaHeader.tsx
+33 -45
View File
@@ -215,67 +215,55 @@ export const ProfileMediaHeader: React.FC<ProfileMediaHeaderProps> = observer(
); );
return ( return (
<header style={PROFILE_MODAL_GEOMETRY_STYLE} data-flx="user.user-profile-modal.profile-media-header.header"> <header style={PROFILE_MODAL_GEOMETRY_STYLE} data-flx="user.user-profile-modal.profile-media-header.header">
{hasBannerMenu ? ( <FocusRing enabled={hasBannerMenu} data-flx="user.user-profile-modal.profile-media-header.focus-ring">
<FocusRing data-flx="user.user-profile-modal.profile-media-header.focus-ring"> {/* biome-ignore lint/a11y/noStaticElementInteractions: the banner only takes role="button"/tabIndex when an image menu exists, and the element stays mounted either way so the banner image is never refetched. */}
<div {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label is set only alongside role="button". */}
ref={mergedBannerRef}
className={userProfileModalStyles.bannerContainer}
onContextMenu={(event) => handleImageContextMenu(event, hasBannerMenu, renderBannerMenu)}
onKeyDown={(event) => handleImageKeyDown(event, hasBannerMenu, renderBannerMenu)}
role="button"
tabIndex={0}
aria-label={i18n._(OPEN_BANNER_OPTIONS_DESCRIPTOR)}
data-flx="user.user-profile-modal.profile-media-header.button.image-key-down"
>
{bannerContent}
{showGifIndicator && (
<GifIndicator data-flx="user.user-profile-modal.profile-media-header.gif-indicator" />
)}
</div>
</FocusRing>
) : (
<div <div
ref={mergedBannerRef} ref={mergedBannerRef}
className={userProfileModalStyles.bannerContainer} className={userProfileModalStyles.bannerContainer}
data-flx="user.user-profile-modal.profile-media-header.div--2" onContextMenu={
hasBannerMenu ? (event) => handleImageContextMenu(event, hasBannerMenu, renderBannerMenu) : undefined
}
onKeyDown={
hasBannerMenu ? (event) => handleImageKeyDown(event, hasBannerMenu, renderBannerMenu) : undefined
}
role={hasBannerMenu ? 'button' : undefined}
tabIndex={hasBannerMenu ? 0 : undefined}
aria-label={hasBannerMenu ? i18n._(OPEN_BANNER_OPTIONS_DESCRIPTOR) : undefined}
data-flx="user.user-profile-modal.profile-media-header.button.image-key-down"
> >
{bannerContent} {bannerContent}
{showGifIndicator && ( {showGifIndicator && <GifIndicator data-flx="user.user-profile-modal.profile-media-header.gif-indicator" />}
<GifIndicator data-flx="user.user-profile-modal.profile-media-header.gif-indicator--2" />
)}
</div> </div>
)} </FocusRing>
<div <div
className={userProfileModalStyles.headerContainer} className={userProfileModalStyles.headerContainer}
data-flx="user.user-profile-modal.profile-media-header.div--3" data-flx="user.user-profile-modal.profile-media-header.div--3"
> >
{hasAvatarMenu ? ( <FocusRing
<FocusRing enabled={hasAvatarMenu}
ringClassName={userProfileModalStyles.avatarFocusRing} ringClassName={userProfileModalStyles.avatarFocusRing}
data-flx="user.user-profile-modal.profile-media-header.focus-ring--2" data-flx="user.user-profile-modal.profile-media-header.focus-ring--2"
> >
<div {/* biome-ignore lint/a11y/noStaticElementInteractions: the avatar frame only takes role="button"/tabIndex when an image menu exists, and the element stays mounted either way so the avatar is never refetched. */}
className={userProfileModalStyles.avatarContainer} {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label is set only alongside role="button". */}
style={avatarContainerStyle}
onContextMenu={(event) => handleImageContextMenu(event, hasAvatarMenu, renderAvatarMenu)}
onKeyDown={(event) => handleImageKeyDown(event, hasAvatarMenu, renderAvatarMenu)}
role="button"
tabIndex={0}
aria-label={i18n._(OPEN_AVATAR_OPTIONS_DESCRIPTOR)}
data-flx="user.user-profile-modal.profile-media-header.button.image-key-down--2"
>
{avatarContent}
</div>
</FocusRing>
) : (
<div <div
className={userProfileModalStyles.avatarContainer} className={userProfileModalStyles.avatarContainer}
style={avatarContainerStyle} style={avatarContainerStyle}
data-flx="user.user-profile-modal.profile-media-header.div--4" onContextMenu={
hasAvatarMenu ? (event) => handleImageContextMenu(event, hasAvatarMenu, renderAvatarMenu) : undefined
}
onKeyDown={
hasAvatarMenu ? (event) => handleImageKeyDown(event, hasAvatarMenu, renderAvatarMenu) : undefined
}
role={hasAvatarMenu ? 'button' : undefined}
tabIndex={hasAvatarMenu ? 0 : undefined}
aria-label={hasAvatarMenu ? i18n._(OPEN_AVATAR_OPTIONS_DESCRIPTOR) : undefined}
data-flx="user.user-profile-modal.profile-media-header.button.image-key-down--2"
> >
{avatarContent} {avatarContent}
</div> </div>
)} </FocusRing>
<div <div
className={userProfileModalStyles.actionButtonsContainer} className={userProfileModalStyles.actionButtonsContainer}
data-flx="user.user-profile-modal.profile-media-header.div--5" data-flx="user.user-profile-modal.profile-media-header.div--5"