From 0f29c5673cb205cc596f038698677de5c251076c Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 18 Apr 2023 12:03:42 -0400
Subject: [PATCH 1/2] Fix bug with slug in Group Media

---
 app/soapbox/features/group/group-gallery.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/group/group-gallery.tsx b/app/soapbox/features/group/group-gallery.tsx
index f8a259e50..f5b1164e7 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<IGroupGallery> = (props) => {
+  const { groupId } = props.params;
+
+  const dispatch = useAppDispatch();
 
   const { group, isLoading: groupIsLoading } = useGroup(groupId);
 

From e88be5fadacecf575d6aefa398f1e201a6abfeb8 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 18 Apr 2023 12:03:52 -0400
Subject: [PATCH 2/2] Fix spacing

---
 app/soapbox/features/group/group-gallery.tsx | 23 ++++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/features/group/group-gallery.tsx b/app/soapbox/features/group/group-gallery.tsx
index f5b1164e7..96ed47e13 100644
--- a/app/soapbox/features/group/group-gallery.tsx
+++ b/app/soapbox/features/group/group-gallery.tsx
@@ -27,6 +27,7 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
     entities: statuses,
     fetchNextPage,
     isLoading,
+    isFetching,
     hasNextPage,
   } = useGroupMedia(groupId);
 
@@ -48,21 +49,25 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
 
   if (isLoading || groupIsLoading) {
     return (
-      <Column>
-        <Spinner />
+      <Column transparent withHeader={false}>
+        <div className='pt-6'>
+          <Spinner />
+        </div>
       </Column>
     );
   }
 
   if (!group) {
     return (
-      <MissingIndicator />
+      <div className='pt-6'>
+        <MissingIndicator nested />
+      </div>
     );
   }
 
   return (
     <Column label={group.display_name} transparent withHeader={false}>
-      <div role='feed' className='grid grid-cols-2 gap-2 sm:grid-cols-3'>
+      <div role='feed' className='mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3'>
         {attachments.map((attachment) => (
           <MediaItem
             key={`${attachment.status.id}+${attachment.id}`}
@@ -76,16 +81,10 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
             <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
           </div>
         )}
-
-        {(hasNextPage && !isLoading) && (
-          <LoadMore className='my-auto' visible={!isLoading} onClick={fetchNextPage} />
-        )}
       </div>
 
-      {isLoading && (
-        <div className='slist__append'>
-          <Spinner />
-        </div>
+      {hasNextPage && (
+        <LoadMore className='mt-4' disabled={isFetching} onClick={fetchNextPage} />
       )}
     </Column>
   );