i changed my mind, fetch logic does belong in <List>

src/components/user_profile/user_profile.js

@@ -1,4 +1,4 @@
-import { get, isEmpty } from 'lodash'
+import { get } from 'lodash'
 import { mapState } from 'pinia'
 
 import Conversation from 'src/components/conversation/conversation.vue'
@@ -27,12 +27,6 @@ const UserProfile = {
       userId: null,
       tab: defaultTabKey,
       footerRef: null,
-      friendsLoading: false,
-      friendsError: null,
-      friendsBottomedOut: false,
-      followersLoading: false,
-      followersError: null,
-      followersBottomedOut: false,
     }
   },
   created() {
@@ -109,24 +103,10 @@ const UserProfile = {
       this.footerRef = el
     },
     fetchUsers(group) {
-      if (this[group + 'Loading']) return
-
-      const capGroup = group[0].toUpperCase() + group.slice(1)
-
-      this[group + 'Loading'] = true
-      this[group + 'Error'] = null
-
-      this.$store
-        .dispatch('fetch' + capGroup, this.userId)
-        .then((newEntries) => {
-          this[group + 'Loading'] = false
-          this[group + 'BottomedOut'] = isEmpty(newEntries)
-          return newEntries
-        })
-        .catch((error) => {
-          this[group + 'Loading'] = false
-          this[group + 'Error'] = error
-        })
+      return () => this
+        .$store
+        .dispatch('fetch' + group, this.userId)
+        .then((result) => ({ items: result }))
     },
     load(userNameOrId) {
       const startFetchingTimeline = (timeline, userId) => {

src/components/user_profile/user_profile.vue

@@ -40,11 +40,8 @@
           :disabled="!user.friends_count"
         >
           <List
-            :items="friends"
-            :loading="friendsLoading"
-            :error="friendsError"
-            :bottomed-out="friendsBottomedOut"
-            @fetch-requested="fetchUsers('friends')"
+            :fetch-function="fetchUsers('Friends')"
+            :external-items="friends"
           >
             <template #item="{item}">
               <FollowCard :user="item" />
@@ -59,11 +56,8 @@
           :disabled="!user.followers_count"
         >
           <List
-            :items="followers"
-            :loading="followersLoading"
-            :error="followersError"
-            :bottomed-out="followersBottomedOut"
-            @fetch-requested="fetchUsers('followers')"
+            :fetch-function="fetchUsers('Followers')"
+            :external-items="followers"
           >
             <template #item="{item}">
               <FollowCard