fix: democracy

packages/next-common/components/delegation/delegate/myDelegationSection/publicAnnouncement/democracy.jsx

@@ -2,32 +2,40 @@ import { AvatarContextProvider } from "next-common/context/avatar";
 import nextApi from "next-common/services/nextApi";
 import { delegationDemocracyDelegatesAddressApi } from "next-common/services/url";
 import useRealAddress from "next-common/utils/hooks/useRealAddress";
-import { useEffect, useState } from "react";
+import { useAsync } from "react-use";
 import MemberCardListContainer from "../../common/cardListContainer";
 import DemocracyDelegateCard from "../../democracy/card";
 import Announcement from "./announcement";
 
 export default function DemocracyAnnouncement() {
-  const [data, setData] = useState();
   const realAddress = useRealAddress();
 
-  useEffect(() => {
-    nextApi
+  const state = useAsync(async () => {
+    return await nextApi
       .fetch(delegationDemocracyDelegatesAddressApi(realAddress))
       .then((resp) => {
         if (resp.result) {
-          setData(resp.result);
+          return resp.result;
         }
       });
   }, [realAddress]);
 
-  const addressAvatarMap = new Map([[data?.address, data?.manifesto?.image]]);
+  const addressAvatarMap = new Map([
+    [state.value?.address, state.value?.manifesto?.image],
+  ]);
 
-  if (data) {
+  if (state.loading) {
+    return null;
+  }
+
+  if (state.value) {
     return (
       <AvatarContextProvider addressAvatarMap={addressAvatarMap}>
         <MemberCardListContainer>
-          <DemocracyDelegateCard delegate={data} showDelegateButton={false} />
+          <DemocracyDelegateCard
+            delegate={state.value}
+            showDelegateButton={false}
+          />
         </MemberCardListContainer>
       </AvatarContextProvider>
     );