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 (
<header style={PROFILE_MODAL_GEOMETRY_STYLE} data-flx="user.user-profile-modal.profile-media-header.header">
{hasBannerMenu ? (
<FocusRing data-flx="user.user-profile-modal.profile-media-header.focus-ring">
<div
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>
) : (
<FocusRing enabled={hasBannerMenu} 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. */}
{/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label is set only alongside role="button". */}
<div
ref={mergedBannerRef}
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}
{showGifIndicator && (
<GifIndicator data-flx="user.user-profile-modal.profile-media-header.gif-indicator--2" />
)}
{showGifIndicator && <GifIndicator data-flx="user.user-profile-modal.profile-media-header.gif-indicator" />}
</div>
)}
</FocusRing>
<div
className={userProfileModalStyles.headerContainer}
data-flx="user.user-profile-modal.profile-media-header.div--3"
>
{hasAvatarMenu ? (
<FocusRing
ringClassName={userProfileModalStyles.avatarFocusRing}
data-flx="user.user-profile-modal.profile-media-header.focus-ring--2"
>
<div
className={userProfileModalStyles.avatarContainer}
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>
) : (
<FocusRing
enabled={hasAvatarMenu}
ringClassName={userProfileModalStyles.avatarFocusRing}
data-flx="user.user-profile-modal.profile-media-header.focus-ring--2"
>
{/* 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. */}
{/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label is set only alongside role="button". */}
<div
className={userProfileModalStyles.avatarContainer}
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}
</div>
)}
</FocusRing>
<div
className={userProfileModalStyles.actionButtonsContainer}
data-flx="user.user-profile-modal.profile-media-header.div--5"