From 63afb1535674914f4f3b47579137caae19c6f6a7 Mon Sep 17 00:00:00 2001
From: Michael Barrett <mike@ghost.org>
Date: Tue, 22 Oct 2024 20:56:14 +0100
Subject: [PATCH] Added button to show more followers on profile in
 admin-x-activitypub (#21371)

no refs
---
 apps/admin-x-activitypub/package.json             |  2 +-
 .../src/components/Profile.tsx                    | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-activitypub/package.json b/apps/admin-x-activitypub/package.json
index 27d1c650ee..00410acba0 100644
--- a/apps/admin-x-activitypub/package.json
+++ b/apps/admin-x-activitypub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/admin-x-activitypub",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/apps/admin-x-activitypub/src/components/Profile.tsx b/apps/admin-x-activitypub/src/components/Profile.tsx
index 20c9275b1f..0a2c8b445f 100644
--- a/apps/admin-x-activitypub/src/components/Profile.tsx
+++ b/apps/admin-x-activitypub/src/components/Profile.tsx
@@ -35,6 +35,12 @@ const Profile: React.FC<ProfileProps> = ({}) => {
 
     const layout = 'feed';
 
+    const [visibleFollowers, setVisibleFollowers] = useState(30);
+
+    const loadMoreFollowers = () => {
+        setVisibleFollowers(prev => prev + 30);
+    };
+
     const tabs = [
         {
             id: 'posts',
@@ -149,7 +155,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                         </NoValueLabel>
                     ) : (
                         <List>
-                            {followers.map((item) => {
+                            {followers.slice(0, visibleFollowers).map((item) => {
                                 return (
                                     <ActivityItem key={item.id} url={item.url}>
                                         <APAvatar author={item} />
@@ -164,6 +170,13 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                             })}
                         </List>
                     )}
+                    {visibleFollowers < followers.length && (
+                        <Button
+                            className='mt-4'
+                            label='Load More'
+                            onClick={loadMoreFollowers}
+                        />
+                    )}
                 </div>
             ),
             counter: followersCount