diff --git a/app/soapbox/features/group/group-gallery.tsx b/app/soapbox/features/group/group-gallery.tsx index f8a259e50..96ed47e13 100644 --- a/app/soapbox/features/group/group-gallery.tsx +++ b/app/soapbox/features/group/group-gallery.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import { useParams } from 'react-router-dom'; import { openModal } from 'soapbox/actions/modals'; import LoadMore from 'soapbox/components/load-more'; @@ -13,10 +12,14 @@ import MediaItem from '../account-gallery/components/media-item'; import type { Attachment, Status } from 'soapbox/types/entities'; -const GroupGallery = () => { - const dispatch = useAppDispatch(); +interface IGroupGallery { + params: { groupId: string } +} - const { groupId } = useParams<{ groupId: string }>(); +const GroupGallery: React.FC = (props) => { + const { groupId } = props.params; + + const dispatch = useAppDispatch(); const { group, isLoading: groupIsLoading } = useGroup(groupId); @@ -24,6 +27,7 @@ const GroupGallery = () => { entities: statuses, fetchNextPage, isLoading, + isFetching, hasNextPage, } = useGroupMedia(groupId); @@ -45,21 +49,25 @@ const GroupGallery = () => { if (isLoading || groupIsLoading) { return ( - - + +
+ +
); } if (!group) { return ( - +
+ +
); } return ( -
+
{attachments.map((attachment) => ( {
)} - - {(hasNextPage && !isLoading) && ( - - )}
- {isLoading && ( -
- -
+ {hasNextPage && ( + )}
);