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 {getGroupDMTitle, getGuildEmbedSplashAspectRatio, getImageAspectRatioFromBase64} from './InviteEmbed/utils';
import styles from './InviteEmbed.module.css';
import {useMaybeMessageViewContext} from './MessageViewContext';
const createTitleKeyDownHandler = (callback: () => void) => (event: React.KeyboardEvent<HTMLButtonElement>) => {
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 shouldForceSkeleton = useEmbedSkeletonOverride();
const invite = inviteState?.data ?? null;
const isGroupDM = invite != null && isGroupDmInvite(invite);
const isPackInvite = invite != null && isPackInviteGuard(invite);
const isGuildInviteType = invite != null && isGuildInvite(invite);
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 splashURL =
guild != null ? AvatarUtils.getGuildEmbedSplashURL({id: guild.id, embedSplash: embedSplash || null}) : null;
const channelFromInvite = (isGuildInviteType || isGroupDM) && invite ? invite.channel : null;
const channelId = channelFromInvite?.id ?? undefined;
const splashLayoutRef = React.useRef(false);
const splashChannelRef = React.useRef<string | null>(null);
React.useLayoutEffect(() => {
if (isGroupDM || !channelId) return;
if (splashChannelRef.current !== channelId) {
splashChannelRef.current = channelId;
splashLayoutRef.current = false;
}
const messageViewContext = useMaybeMessageViewContext();
const currentChannelId = messageViewContext?.channel.id;
const inviteWrapperRef = React.useRef<HTMLDivElement | null>(null);
const previousHeightRef = React.useRef<number | null>(null);
const hasSplash = Boolean(splashURL);
if (hasSplash && !splashLayoutRef.current) {
ComponentDispatch.dispatch('LAYOUT_RESIZED', {channelId});
React.useLayoutEffect(() => {
if (!currentChannelId) return;
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;
}, [channelId, isGroupDM, splashURL]);
previousHeightRef.current = nextHeight;
});
resizeObserver.observe(node);
return () => resizeObserver.disconnect();
}, [currentChannelId]);
const isLoading = shouldForceSkeleton || !inviteState || inviteState.loading;
@ -119,11 +130,11 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
}
}, [code]);
React.useLayoutEffect(() => {
if (prevLoadingRef.current && !isLoading && channelId) {
ComponentDispatch.dispatch('LAYOUT_RESIZED', {channelId});
if (prevLoadingRef.current && !isLoading && currentChannelId) {
ComponentDispatch.dispatch('LAYOUT_RESIZED', {channelId: currentChannelId});
}
prevLoadingRef.current = isLoading;
}, [isLoading, channelId]);
}, [isLoading, currentChannelId]);
React.useEffect(() => {
if (!inviteState) {
@ -131,15 +142,13 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
}
}, [code, inviteState]);
let content: React.ReactNode;
if (shouldForceSkeleton || !inviteState || inviteState.loading) {
return <InviteLoadingState />;
}
if (inviteState.error || !invite) {
return <InviteNotFoundError />;
}
if (isGroupDmInvite(invite)) {
content = <InviteLoadingState />;
} else if (inviteState.error || !invite) {
content = <InviteNotFoundError />;
} else if (isGroupDmInvite(invite)) {
const inviter = UserStore.getUser(invite.inviter?.id ?? '');
const groupDMTitle = getGroupDMTitle(invite.channel);
const groupDMPath = Routes.dmChannel(invite.channel.id);
@ -152,7 +161,7 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
const isAlreadyInGroupDM = groupDMCounts.hasLocalChannel;
const memberCount = groupDMCounts.memberCount;
return (
content = (
<EmbedCard
splashURL={null}
headerClassName={styles.headerInvite}
@ -194,9 +203,7 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
}
/>
);
}
if (isPackInviteGuard(invite)) {
} else if (isPackInviteGuard(invite)) {
const pack = invite.pack;
const packCreator = packCreatorRecord ?? new UserRecord(pack.creator);
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 handleAcceptInvite = () => InviteActionCreators.acceptAndTransitionToChannel(invite.code, i18n);
return (
content = (
<EmbedCard
splashURL={null}
headerClassName={styles.headerInvite}
@ -238,10 +245,9 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
}
/>
);
}
if (!guild || !isGuildInvite(invite)) return <InviteNotFoundError />;
} else if (!guild || !isGuildInvite(invite)) {
content = <InviteNotFoundError />;
} else {
const guildActionState = getGuildInviteActionState({invite, guild});
const {features, presenceCount, memberCount} = guildActionState;
const isVerified = features.includes(GuildFeatures.VERIFIED);
@ -267,7 +273,7 @@ export const InviteEmbed = observer(function InviteEmbed({code}: InviteEmbedProp
}
};
return (
content = (
<EmbedCard
splashURL={splashURL}
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(() => {