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): show guild initials until the guild icon has painted (#1932)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:48:11 +02:00
1 parent 299172c8aa
commit 919e890011
2 files changed
+8 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItemPresentation.tsx
+3 -2
View File
@@ -313,6 +313,7 @@ export const GuildListItemPresentation = forwardRef<
[backgroundImage, draggingCursor],
);
const guildIconTarget = useMemo(() => ({borderRadius: iconBorderRadius}), [iconBorderRadius]);
const hasPaintedIcon = backgroundImage != null;
return (
<LongPressable
{...domProps}
@@ -364,7 +365,7 @@ export const GuildListItemPresentation = forwardRef<
tabIndex={-1}
className={clsx(
styles.guildIcon,
guild.icon == null && styles.guildIconNoImage,
!hasPaintedIcon && styles.guildIconNoImage,
isSelected && styles.guildIconSelected,
)}
to={guildIconTarget}
@@ -374,7 +375,7 @@ export const GuildListItemPresentation = forwardRef<
style={guildIconStyle}
data-flx="app.sidebar-nav.guild-list-item-presentation.guild-icon"
>
{guild.icon == null && (
{!hasPaintedIcon && (
<span
className={styles.guildIconInitials}
data-flx="app.sidebar-nav.guild-list-item-presentation.guild-icon-initials"
fluxer_app/src/features/app/components/layout/sidebar_nav/UseGuildListItemInteraction.tsx
+5 -12
View File
@@ -55,13 +55,6 @@ function resolveGuildIconBackgroundImage(iconURL: string, displayedIconURL: stri
return `url(${displayedIconURL})`;
}
function resolveInitiallyLoadedImageURL(imageURL: string): string | null {
if (ImageCacheUtils.hasImage(imageURL)) {
return imageURL;
}
return null;
}
export function useGuildListItemInteraction({
guild,
isDesktopLayout,
@@ -79,16 +72,16 @@ export function useGuildListItemInteraction({
});
const iconURL = AvatarSourceUtils.getGuildIconURL(guild, false);
const hoverIconURL = AvatarSourceUtils.getGuildIconURL(guild, true);
const [loadedAnimatedURL, setLoadedAnimatedURL] = useState<string | null>(() =>
resolveInitiallyLoadedImageURL(hoverIconURL),
);
const isAnimatableIcon = hoverIconURL !== iconURL;
const [loadedAnimatedURL, setLoadedAnimatedURL] = useState<string | null>(null);
const [bottomSheetOpen, setBottomSheetOpen] = useState(false);
useEffect(() => ImageCacheUtils.pinImage(iconURL), [iconURL]);
useEffect(() => {
if (!isAnimatableIcon) return;
if (!isHovering && !contextMenuOpen) return;
if (loadedAnimatedURL === hoverIconURL) return;
return ImageCacheUtils.loadImage(hoverIconURL, () => setLoadedAnimatedURL(hoverIconURL));
}, [contextMenuOpen, hoverIconURL, isHovering, loadedAnimatedURL]);
}, [contextMenuOpen, hoverIconURL, isAnimatableIcon, isHovering, loadedAnimatedURL]);
const handleSelect = useCallback(() => {
markDirectSelection(DirectSelectionSurface.GUILD_RAIL);
preloadChannelNow();
@@ -126,7 +119,7 @@ export function useGuildListItemInteraction({
if (!isSortingList && isMobileExperience) setBottomSheetOpen(true);
}, [isMobileExperience, isSortingList]);
const handleCloseBottomSheet = useCallback(() => setBottomSheetOpen(false), []);
const shouldPlayAnimated = (isHovering || contextMenuOpen) && loadedAnimatedURL === hoverIconURL;
const shouldPlayAnimated = isAnimatableIcon && (isHovering || contextMenuOpen) && loadedAnimatedURL === hoverIconURL;
const displayedIconURL = resolveDisplayedGuildIconURL({hoverIconURL, iconURL, shouldPlayAnimated});
const backgroundImage = resolveGuildIconBackgroundImage(iconURL, displayedIconURL);
return {