1 files changed, 52 insertions, 2 deletions

diff --git a/app/assets/javascripts/profile/components/followers_tab.vue b/app/assets/javascripts/profile/components/followers_tab.vue
index 5b69f835294..1fa579bc611 100644
--- a/app/assets/javascripts/profile/components/followers_tab.vue
+++ b/app/assets/javascripts/profile/components/followers_tab.vue
@@ -1,16 +1,59 @@
 <script>
 import { GlBadge, GlTab } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { getUserFollowers } from '~/rest_api';
+import { createAlert } from '~/alert';
+import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
+import Follow from './follow.vue';
 
 export default {
   i18n: {
     title: s__('UserProfile|Followers'),
+    errorMessage: s__(
+      'UserProfile|An error occurred loading the followers. Please refresh the page to try again.',
+    ),
   },
   components: {
     GlBadge,
     GlTab,
+    Follow,
+  },
+  inject: ['followersCount', 'userId'],
+  data() {
+    return {
+      followers: [],
+      loading: true,
+      totalItems: 0,
+      page: 1,
+    };
+  },
+  watch: {
+    page: {
+      async handler() {
+        this.loading = true;
+
+        try {
+          const { data: followers, headers } = await getUserFollowers(this.userId, {
+            page: this.page,
+          });
+          const { total } = parseIntPagination(normalizeHeaders(headers));
+
+          this.followers = followers;
+          this.totalItems = total;
+        } catch (error) {
+          createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true });
+        } finally {
+          this.loading = false;
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    onPaginationInput(page) {
+      this.page = page;
+    },
   },
-  inject: ['followers'],
 };
 </script>
 
@@ -18,7 +61,14 @@ export default {
   <gl-tab>
     <template #title>
       <span>{{ $options.i18n.title }}</span>
-      <gl-badge size="sm" class="gl-ml-2">{{ followers }}</gl-badge>
+      <gl-badge size="sm" class="gl-ml-2">{{ followersCount }}</gl-badge>
     </template>
+    <follow
+      :users="followers"
+      :loading="loading"
+      :page="page"
+      :total-items="totalItems"
+      @pagination-input="onPaginationInput"
+    />
   </gl-tab>
 </template>