fix: ButtonFollow loading state should be per button (#367)

snapshot-labs · May 27, 2024 · a8f3394 · a8f3394
1 parent d5a5681
commit a8f3394
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/apps/ui/src/components/ButtonFollow.vue b/apps/ui/src/components/ButtonFollow.vue
@@ -12,7 +12,9 @@ const followedSpacesStore = useFollowedSpacesStore();
 const spaceFollowed = computed(() => followedSpacesStore.isFollowed(spaceIdComposite));
 
 const loading = computed(
-  () => !followedSpacesStore.followedSpacesLoaded || followedSpacesStore.followedSpaceLoading
+  () =>
+    !followedSpacesStore.followedSpacesLoaded ||
+    followedSpacesStore.followedSpaceLoading.has(spaceIdComposite)
 );
 </script>
 

diff --git a/apps/ui/src/stores/followedSpaces.ts b/apps/ui/src/stores/followedSpaces.ts
@@ -17,7 +17,7 @@ export const useFollowedSpacesStore = defineStore('followedSpaces', () => {
 
   const followedSpacesIds = ref<string[]>([]);
   const followedSpacesLoaded = ref(false);
-  const followedSpaceLoading = ref(false);
+  const followedSpaceLoading = reactive(new Set<string>());
   const followedSpacesIdsByAccount = useStorage(
     `${pkg.name}.spaces-followed`,
     {} as Record<string, string[]>
@@ -88,7 +88,7 @@ export const useFollowedSpacesStore = defineStore('followedSpaces', () => {
   async function toggleSpaceFollow(id: string) {
     const alreadyFollowed = followedSpacesIds.value.includes(id);
     const [spaceNetwork, spaceId] = id.split(':') as [NetworkID, string];
-    followedSpaceLoading.value = true;
+    followedSpaceLoading.add(id);
 
     try {
       if (alreadyFollowed) {
@@ -111,7 +111,7 @@ export const useFollowedSpacesStore = defineStore('followedSpaces', () => {
         followedSpacesIdsByAccount.value[web3.value.account].unshift(id);
       }
     } finally {
-      followedSpaceLoading.value = false;
+      followedSpaceLoading.delete(id);
     }
   }