diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx index 8dce32f6f..8632d3c5d 100644 --- a/app/soapbox/components/still-image.tsx +++ b/app/soapbox/components/still-image.tsx @@ -16,10 +16,12 @@ interface IStillImage { letterboxed?: boolean /** Whether to show the file extension in the corner. */ showExt?: boolean + /** Callback function if the image fails to load */ + onError?(): void } /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */ -const StillImage: React.FC = ({ alt, className, src, style, letterboxed = false, showExt = false }) => { +const StillImage: React.FC = ({ alt, className, src, style, letterboxed = false, showExt = false, onError }) => { const settings = useSettings(); const autoPlayGif = settings.get('autoPlayGif'); @@ -55,6 +57,7 @@ const StillImage: React.FC = ({ alt, className, src, style, letterb alt={alt} ref={img} onLoad={handleImageLoad} + onError={onError} className={clsx(baseClassName, { 'invisible group-hover:visible': hoverToPlay, })} diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx index a49d87fe7..f3180037b 100644 --- a/app/soapbox/features/group/components/group-header.tsx +++ b/app/soapbox/features/group/components/group-header.tsx @@ -1,11 +1,11 @@ import { List as ImmutableList } from 'immutable'; -import React from 'react'; +import React, { useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { openModal } from 'soapbox/actions/modals'; import GroupAvatar from 'soapbox/components/groups/group-avatar'; import StillImage from 'soapbox/components/still-image'; -import { HStack, Stack, Text } from 'soapbox/components/ui'; +import { HStack, Icon, Stack, Text } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; import { normalizeAttachment } from 'soapbox/normalizers'; import { isDefaultHeader } from 'soapbox/utils/accounts'; @@ -30,6 +30,8 @@ const GroupHeader: React.FC = ({ group }) => { const intl = useIntl(); const dispatch = useAppDispatch(); + const [isHeaderMissing, setIsHeaderMissing] = useState(false); + if (!group) { return (
@@ -88,20 +90,27 @@ const GroupHeader: React.FC = ({ group }) => { setIsHeaderMissing(true)} /> ); if (!isDefaultHeader(group.header)) { header = ( - + {header} ); } } - return header; + return ( +
+ {isHeaderMissing ? ( + + ) : header} +
+ ); }; return (