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

perf(app): stop loading the animated guild banner where it is hidden (#1929)

Browse Source
This commit is contained in:
Hampus
2026-08-24 12:47:37 +02:00
committed by GitHub
parent d0b4688a6c
commit e5c8ef7d60
3 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_app/src/features/app/components/layout/GuildDetachedBanner.tsx
+7 -6
View File
@@ -20,21 +20,22 @@ export const GuildDetachedBanner = observer(function GuildDetachedBanner({guild}
: undefined,
[guild.bannerHeight, guild.bannerWidth],
);
const isDetachedBanner = guild.features.has(GuildFeatures.DETACHED_BANNER);
const staticBannerURL = useMemo(
() => AvatarUtils.getGuildBannerURL({id: guild.id, banner: guild.banner}, false) || null,
[guild.banner, guild.id],
() =>
isDetachedBanner ? AvatarUtils.getGuildBannerURL({id: guild.id, banner: guild.banner}, false) || null : null,
[guild.banner, guild.id, isDetachedBanner],
);
const animatedBannerURL = useMemo(
() => AvatarUtils.getGuildBannerURL({id: guild.id, banner: guild.banner}, true) || null,
[guild.banner, guild.id],
() => (isDetachedBanner ? AvatarUtils.getGuildBannerURL({id: guild.id, banner: guild.banner}, true) || null : null),
[guild.banner, guild.id, isDetachedBanner],
);
const {hoverRef: bannerHoverRef, imageUrl: bannerURL} = useAnimatedImageUrl({
staticUrl: staticBannerURL,
animatedUrl: animatedBannerURL,
kind: 'gif',
});
const isDetachedBanner = guild.features.has(GuildFeatures.DETACHED_BANNER);
if (!bannerURL || !isDetachedBanner) return null;
if (!bannerURL) return null;
const maxHeight = `${MAX_VIEWPORT_HEIGHT_FRACTION * 100}vh`;
const bannerHeight = guild.bannerHeight ?? DEFAULT_BANNER_HEIGHT;
return (
fluxer_app/src/features/app/components/layout/GuildHeader.tsx
+3 -3
View File
@@ -66,20 +66,20 @@ export const GuildHeader = observer(({guild}: {guild: Guild}) => {
const {popouts} = Popout;
const isOpen = 'guild-header' in popouts;
const isMobile = MobileLayout.isMobileLayout();
const isDetachedBanner = guild.features.has(GuildFeatures.DETACHED_BANNER);
const staticBannerURL = useMemo(
() => AvatarUtils.getGuildBannerURL({id: guild.id, banner: guild.banner}, false) || null,
[guild.banner, guild.id],
);
const animatedBannerURL = useMemo(
() => AvatarUtils.getGuildBannerURL({id: guild.id, banner: guild.banner}, true) || null,
[guild.banner, guild.id],
() => (isDetachedBanner ? null : AvatarUtils.getGuildBannerURL({id: guild.id, banner: guild.banner}, true) || null),
[guild.banner, guild.id, isDetachedBanner],
);
const {hoverRef: bannerHoverRef, imageUrl: bannerURL} = useAnimatedImageUrl({
staticUrl: staticBannerURL,
animatedUrl: animatedBannerURL,
kind: 'gif',
});
const isDetachedBanner = guild.features.has(GuildFeatures.DETACHED_BANNER);
const showIntegratedBanner = Boolean(bannerURL && !isDetachedBanner);
const bannerAspectRatio =
guild.bannerWidth && guild.bannerHeight
fluxer_app/src/features/app/components/pages/YouPage.tsx
+10 -4
View File
@@ -55,10 +55,16 @@ export const YouPage = observer(({onAvatarClick}: YouPageProps) => {
return normalizeCustomStatus(Presence.getCustomStatus(user.id));
}, [user]);
const hasCustomStatus = Boolean(normalizedCustomStatus);
const staticBannerUrl = user?.banner ? AvatarUtils.getUserBannerURL({id: user.id, banner: user.banner}, false) : null;
const animatedBannerUrl = user?.banner
? AvatarUtils.getUserBannerURL({id: user.id, banner: user.banner}, true)
: null;
const userId = user?.id;
const userBanner = user?.banner;
const staticBannerUrl = useMemo(
() => (userId && userBanner ? AvatarUtils.getUserBannerURL({id: userId, banner: userBanner}, false) : null),
[userId, userBanner],
);
const animatedBannerUrl = useMemo(
() => (userId && userBanner ? AvatarUtils.getUserBannerURL({id: userId, banner: userBanner}, true) : null),
[userId, userBanner],
);
const {hoverRef: bannerHoverRef, imageUrl: bannerUrl} = useAnimatedImageUrl({
staticUrl: staticBannerUrl,
animatedUrl: animatedBannerUrl,