load followers from api

packages/app/src/components/FollowersList/index.jsx

@@ -1,15 +1,51 @@
 import React from "react"
 import * as antd from "antd"
 import { Icons } from "components/Icons"
+import UserModel from "models/user"
 
 import "./index.less"
 
 export default (props) => {
+    const [loading, setLoading] = React.useState(false)
+    const [followers, setFollowers] = React.useState(props.followers ?? [])
+
     const goToProfile = (username) => {
         window.app.goToAccount(username)
     }
 
-    if (props.followers.length === 0) {
+    const loadFollowers = async () => {
+        setLoading(true)
+
+        console.log(`Loading Followers for [${props.username ?? props.user_id}]...`)
+
+        const followers = await UserModel.getUserFollowers({
+            user_id: props.user_id,
+        }).catch((err) => {
+            console.error(err)
+            app.message.error("Failed to fetch followers")
+
+            return null
+        })
+
+        setLoading(false)
+
+        if (followers) {
+            console.log(`Loaded Followers: [${followers.length}] >`, followers)
+            setFollowers(followers)
+        }
+    }
+
+    React.useEffect(() => {
+        if (props.username && !props.followers) {
+            loadFollowers()
+        }
+    }, [])
+
+    if (loading) {
+        return <antd.Skeleton active />
+    }
+
+    if (followers.length === 0) {
         return <antd.Result
             icon={<Icons.UserX style={{ fontSize: "50px" }} />}
         >
@@ -23,7 +59,7 @@ export default (props) => {
     }
 
     return <div className="followersList">
-        {props.followers.map((follower) => {
+        {followers.map((follower) => {
             return <div className="follower" onClick={() => goToProfile(follower.username)}>
                 <div className="avatar">
                     <antd.Avatar shape="square" src={follower.avatar} />