simplify <List> API and move logic outside of it

src/components/user_profile/user_profile.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash'
+import { get, isEmpty } from 'lodash'
 import { mapState } from 'pinia'
 
 import Conversation from 'src/components/conversation/conversation.vue'
@@ -27,6 +27,12 @@ const UserProfile = {
       userId: null,
       tab: defaultTabKey,
       footerRef: null,
+      friendsLoading: false,
+      friendsError: null,
+      friendsBottomedOut: false,
+      followersLoading: false,
+      followersError: null,
+      followersBottomedOut: false,
     }
   },
   created() {
@@ -83,22 +89,44 @@ const UserProfile = {
     compactProfiles() {
       return useMergedConfigStore().mergedConfig.compactProfiles
     },
+    friends() {
+      return get(
+        this.$store.getters.findUser(this.userId),
+        'friendIds',
+        [],
+      ).map((id) => this.$store.getters.findUser(id))
+    },
+    followers() {
+      return get(
+        this.$store.getters.findUser(this.userId),
+        'followerIds',
+        [],
+      ).map((id) => this.$store.getters.findUser(id))
+    },
   },
   methods: {
     setFooterRef(el) {
       this.footerRef = el
     },
-    getFriends() {
-      return get(
-        this.$store.getters.findUser(this.userId),
-        'friendIds', []
-      ).map((id) => this.$store.getters.findUser(id))
-    },
-    getFollowers() {
-      return get(
-        this.$store.getters.findUser(this.userId),
-        'followerIds', []
-      ).map((id) => this.$store.getters.findUser(id))
+    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
+        })
     },
     load(userNameOrId) {
       const startFetchingTimeline = (timeline, userId) => {

src/components/user_profile/user_profile.vue

@@ -40,9 +40,11 @@
           :disabled="!user.friends_count"
         >
           <List
-            :user-id="userId"
-            :items-function="getFriends"
-            :fetch-function="() => $store.dispatch('fetchFriends', userId)"
+            :items="friends"
+            :loading="friendsLoading"
+            :error="friendsError"
+            :bottomed-out="friendsBottomedOut"
+            @fetch-requested="fetchUsers('friends')"
           >
             <template #item="{item}">
               <FollowCard :user="item" />
@@ -57,9 +59,11 @@
           :disabled="!user.followers_count"
         >
           <List
-            :user-id="userId"
-            :items-function="getFollowers"
-            :fetch-function="() => $store.dispatch('fetchFollowers', userId)"
+            :items="followers"
+            :loading="followersLoading"
+            :error="followersError"
+            :bottomed-out="followersBottomedOut"
+            @fetch-requested="fetchUsers('followers')"
           >
             <template #item="{item}">
               <FollowCard