diff --git a/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItemPresentation.tsx b/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItemPresentation.tsx index 400d6667a..136a2f52e 100644 --- a/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItemPresentation.tsx +++ b/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItemPresentation.tsx @@ -313,6 +313,7 @@ export const GuildListItemPresentation = forwardRef< [backgroundImage, draggingCursor], ); const guildIconTarget = useMemo(() => ({borderRadius: iconBorderRadius}), [iconBorderRadius]); + const hasPaintedIcon = backgroundImage != null; return ( - {guild.icon == null && ( + {!hasPaintedIcon && ( (() => - resolveInitiallyLoadedImageURL(hoverIconURL), - ); + const isAnimatableIcon = hoverIconURL !== iconURL; + const [loadedAnimatedURL, setLoadedAnimatedURL] = useState(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 {