From ba356c787d369acd798cdfe7fde46f529b404b9e Mon Sep 17 00:00:00 2001
From: Alec LaLonde <alec@convergencelabs.com>
Date: Thu, 26 Aug 2021 15:09:52 -0600
Subject: [PATCH] Added loading spinner to player memberships section

---
 .../components/Player/Section/PlayerMemberships.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/Player/Section/PlayerMemberships.tsx b/packages/web/components/Player/Section/PlayerMemberships.tsx
index 9b3ed93c..0f1bcc41 100644
--- a/packages/web/components/Player/Section/PlayerMemberships.tsx
+++ b/packages/web/components/Player/Section/PlayerMemberships.tsx
@@ -4,6 +4,7 @@ import {
   Heading,
   HStack,
   Link,
+  LoadingState,
   Modal,
   ModalCloseButton,
   ModalContent,
@@ -180,12 +181,14 @@ export const PlayerMemberships: React.FC<MembershipSectionProps> = ({
   const [guildMemberships, setGuildMemberships] = useState<GuildMembership[]>(
     [],
   );
+  const [loadingMemberships, setLoadingMemberships] = useState<boolean>(true);
 
   useEffect(() => {
-    getAllMemberships(player).then((memberships) =>
-      setGuildMemberships(memberships),
-    );
-  }, [player, setGuildMemberships]);
+    getAllMemberships(player).then((memberships) => {
+      setLoadingMemberships(false);
+      setGuildMemberships(memberships);
+    });
+  }, [player]);
 
   const modalContentStyles = isBackdropFilterSupported()
     ? {
@@ -198,6 +201,8 @@ export const PlayerMemberships: React.FC<MembershipSectionProps> = ({
 
   return (
     <ProfileSection title="Memberships" onRemoveClick={onRemoveClick}>
+      {loadingMemberships && <LoadingState />}
+
       {guildMemberships.slice(0, 4).map((membership) => (
         <DaoListing key={membership.memberId} membership={membership} />
       ))}