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 = ({ const [guildMemberships, setGuildMemberships] = useState( [], ); + const [loadingMemberships, setLoadingMemberships] = useState(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 = ({ return ( + {loadingMemberships && } + {guildMemberships.slice(0, 4).map((membership) => ( ))}