murdle/fluxer
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(app): avoid layout shifting for invite embed splashes (#60)

Browse Source
This commit is contained in:
hampus-fluxer 2026-01-06 14:29:03 +01:00 committed by GitHub
parent 915959a021
commit f5a20dda7c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 119 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
fluxer_app/src/components/channel/InviteEmbed.tsx
View File

@ -60,6 +60,7 @@ import {
import * as RouterUtils from '~/utils/RouterUtils'; import * as RouterUtils from '~/utils/RouterUtils';
import {getGroupDMTitle, getGuildEmbedSplashAspectRatio, getImageAspectRatioFromBase64} from './InviteEmbed/utils'; import {getGroupDMTitle, getGuildEmbedSplashAspectRatio, getImageAspectRatioFromBase64} from './InviteEmbed/utils';
import styles from './InviteEmbed.module.css'; import styles from './InviteEmbed.module.css';
import {useMaybeMessageViewContext} from './MessageViewContext';
const createTitleKeyDownHandler = (callback: () => void) => (event: React.KeyboardEvent<HTMLButtonElement>) => { const createTitleKeyDownHandler = (callback: () => void) => (event: React.KeyboardEvent<HTMLButtonElement>) => {
if (event.key === 'Enter' || event.key === ' ') { if (event.key === 'Enter' || event.key === ' ') {
@ -78,7 +79,6 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
const inviteState = InviteStore.invites.get(code) ?? null; const inviteState = InviteStore.invites.get(code) ?? null;
const shouldForceSkeleton = useEmbedSkeletonOverride(); const shouldForceSkeleton = useEmbedSkeletonOverride();
const invite = inviteState?.data ?? null; const invite = inviteState?.data ?? null;
const isGroupDM = invite != null && isGroupDmInvite(invite);
const isPackInvite = invite != null && isPackInviteGuard(invite); const isPackInvite = invite != null && isPackInviteGuard(invite);
const isGuildInviteType = invite != null && isGuildInvite(invite); const isGuildInviteType = invite != null && isGuildInvite(invite);
const packCreatorRecord = React.useMemo(() => { const packCreatorRecord = React.useMemo(() => {
@ -90,23 +90,34 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
const embedSplash = guild != null ? ('embedSplash' in guild ? guild.embedSplash : guild.embed_splash) : undefined; const embedSplash = guild != null ? ('embedSplash' in guild ? guild.embedSplash : guild.embed_splash) : undefined;
const splashURL = const splashURL =
guild != null ? AvatarUtils.getGuildEmbedSplashURL({id: guild.id, embedSplash: embedSplash || null}) : null; guild != null ? AvatarUtils.getGuildEmbedSplashURL({id: guild.id, embedSplash: embedSplash || null}) : null;
const channelFromInvite = (isGuildInviteType || isGroupDM) && invite ? invite.channel : null; const messageViewContext = useMaybeMessageViewContext();
const channelId = channelFromInvite?.id ?? undefined; const currentChannelId = messageViewContext?.channel.id;
const splashLayoutRef = React.useRef(false); const inviteWrapperRef = React.useRef<HTMLDivElement | null>(null);
const splashChannelRef = React.useRef<string | null>(null); const previousHeightRef = React.useRef<number | null>(null);
React.useLayoutEffect(() => {
if (isGroupDM || !channelId) return;
if (splashChannelRef.current !== channelId) {
splashChannelRef.current = channelId;
splashLayoutRef.current = false;
}
const hasSplash = Boolean(splashURL); React.useLayoutEffect(() => {
if (hasSplash && !splashLayoutRef.current) { if (!currentChannelId) return;
ComponentDispatch.dispatch('LAYOUT_RESIZED', {channelId}); const node = inviteWrapperRef.current;
if (!node || typeof ResizeObserver === 'undefined') return;
previousHeightRef.current = node.offsetHeight;
const resizeObserver = new ResizeObserver(() => {
const nextHeight = node.offsetHeight;
const prevHeight = previousHeightRef.current ?? nextHeight;
const heightDelta = nextHeight - prevHeight;
if (heightDelta !== 0) {
ComponentDispatch.dispatch('LAYOUT_RESIZED', {
channelId: currentChannelId,
heightDelta,
});
} }
splashLayoutRef.current = hasSplash; previousHeightRef.current = nextHeight;
}, [channelId, isGroupDM, splashURL]); });
resizeObserver.observe(node);
return () => resizeObserver.disconnect();
}, [currentChannelId]);
const isLoading = shouldForceSkeleton || !inviteState || inviteState.loading; const isLoading = shouldForceSkeleton || !inviteState || inviteState.loading;
@ -119,11 +130,11 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
} }
}, [code]); }, [code]);
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
if (prevLoadingRef.current && !isLoading && channelId) { if (prevLoadingRef.current && !isLoading && currentChannelId) {
ComponentDispatch.dispatch('LAYOUT_RESIZED', {channelId}); ComponentDispatch.dispatch('LAYOUT_RESIZED', {channelId: currentChannelId});
} }
prevLoadingRef.current = isLoading; prevLoadingRef.current = isLoading;
}, [isLoading, channelId]); }, [isLoading, currentChannelId]);
React.useEffect(() => { React.useEffect(() => {
if (!inviteState) { if (!inviteState) {
@ -131,15 +142,13 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
} }
}, [code, inviteState]); }, [code, inviteState]);
let content: React.ReactNode;
if (shouldForceSkeleton || !inviteState || inviteState.loading) { if (shouldForceSkeleton || !inviteState || inviteState.loading) {
return <InviteLoadingState />; content = <InviteLoadingState />;
} } else if (inviteState.error || !invite) {
content = <InviteNotFoundError />;
if (inviteState.error || !invite) { } else if (isGroupDmInvite(invite)) {
return <InviteNotFoundError />;
}
if (isGroupDmInvite(invite)) {
const inviter = UserStore.getUser(invite.inviter?.id ?? ''); const inviter = UserStore.getUser(invite.inviter?.id ?? '');
const groupDMTitle = getGroupDMTitle(invite.channel); const groupDMTitle = getGroupDMTitle(invite.channel);
const groupDMPath = Routes.dmChannel(invite.channel.id); const groupDMPath = Routes.dmChannel(invite.channel.id);
@ -152,7 +161,7 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
const isAlreadyInGroupDM = groupDMCounts.hasLocalChannel; const isAlreadyInGroupDM = groupDMCounts.hasLocalChannel;
const memberCount = groupDMCounts.memberCount; const memberCount = groupDMCounts.memberCount;
return ( content = (
<EmbedCard <EmbedCard
splashURL={null} splashURL={null}
headerClassName={styles.headerInvite} headerClassName={styles.headerInvite}
@ -194,9 +203,7 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
} }
/> />
); );
} } else if (isPackInviteGuard(invite)) {
if (isPackInviteGuard(invite)) {
const pack = invite.pack; const pack = invite.pack;
const packCreator = packCreatorRecord ?? new UserRecord(pack.creator); const packCreator = packCreatorRecord ?? new UserRecord(pack.creator);
const packKindLabel = pack.type === 'emoji' ? t`Emoji pack` : t`Sticker pack`; const packKindLabel = pack.type === 'emoji' ? t`Emoji pack` : t`Sticker pack`;
@ -204,7 +211,7 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
const inviterTag = invite.inviter ? `${invite.inviter.username}#${invite.inviter.discriminator}` : null; const inviterTag = invite.inviter ? `${invite.inviter.username}#${invite.inviter.discriminator}` : null;
const handleAcceptInvite = () => InviteActionCreators.acceptAndTransitionToChannel(invite.code, i18n); const handleAcceptInvite = () => InviteActionCreators.acceptAndTransitionToChannel(invite.code, i18n);
return ( content = (
<EmbedCard <EmbedCard
splashURL={null} splashURL={null}
headerClassName={styles.headerInvite} headerClassName={styles.headerInvite}
@ -238,10 +245,9 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
} }
/> />
); );
} } else if (!guild || !isGuildInvite(invite)) {
content = <InviteNotFoundError />;
if (!guild || !isGuildInvite(invite)) return <InviteNotFoundError />; } else {
const guildActionState = getGuildInviteActionState({invite, guild}); const guildActionState = getGuildInviteActionState({invite, guild});
const {features, presenceCount, memberCount} = guildActionState; const {features, presenceCount, memberCount} = guildActionState;
const isVerified = features.includes(GuildFeatures.VERIFIED); const isVerified = features.includes(GuildFeatures.VERIFIED);
@ -267,7 +273,7 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
} }
}; };
return ( content = (
<EmbedCard <EmbedCard
splashURL={splashURL} splashURL={splashURL}
splashAspectRatio={splashAspectRatio} splashAspectRatio={splashAspectRatio}
@ -315,6 +321,13 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
} }
/> />
); );
}
return (
<div ref={inviteWrapperRef} className={styles.inviteWrapper}>
{content}
</div>
);
}); });
const InviteLoadingState = observer(() => { const InviteLoadingState = observer(() => {