From e4a5355f58e32c6ab4182dd3dff08e2e0e0d78ea Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 12 Apr 2025 10:14:49 +0800
Subject: [PATCH] [Manager] Fix loading state on uninstall button (#3413)

---
 .../content/manager/button/PackActionButton.vue     | 11 +++--------
 .../content/manager/button/PackInstallButton.vue    |  6 ++++++
 .../content/manager/infoPanel/InfoPanelHeader.vue   | 13 ++++++++++---
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/dialog/content/manager/button/PackActionButton.vue b/src/components/dialog/content/manager/button/PackActionButton.vue
index 27a03ab6d..573e5c34e 100644
--- a/src/components/dialog/content/manager/button/PackActionButton.vue
+++ b/src/components/dialog/content/manager/button/PackActionButton.vue
@@ -6,12 +6,12 @@
       'w-full': fullWidth,
       'w-min-content': !fullWidth
     }"
-    :disabled="isInstalling"
+    :disabled="loading"
     v-bind="$attrs"
     @click="onClick"
   >
     <span class="py-2.5 px-3">
-      <template v-if="isInstalling">
+      <template v-if="loading">
         {{ loadingMessage ?? $t('g.loading') }}
       </template>
       <template v-else>
@@ -23,9 +23,6 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { inject, ref } from 'vue'
-
-import { IsInstallingKey } from '@/types/comfyManagerTypes'
 
 const {
   label,
@@ -33,6 +30,7 @@ const {
   fullWidth = false
 } = defineProps<{
   label: string
+  loading?: boolean
   loadingMessage?: string
   fullWidth?: boolean
 }>()
@@ -45,10 +43,7 @@ defineOptions({
   inheritAttrs: false
 })
 
-const isInstalling = inject(IsInstallingKey, ref(false))
-
 const onClick = (): void => {
-  isInstalling.value = true
   emit('action')
 }
 </script>
diff --git a/src/components/dialog/content/manager/button/PackInstallButton.vue b/src/components/dialog/content/manager/button/PackInstallButton.vue
index 16c03ff45..63f544e3a 100644
--- a/src/components/dialog/content/manager/button/PackInstallButton.vue
+++ b/src/components/dialog/content/manager/button/PackInstallButton.vue
@@ -5,8 +5,10 @@
       nodePacks.length > 1 ? $t('manager.installSelected') : $t('g.install')
     "
     severity="secondary"
+    :loading="isInstalling"
     :loading-message="$t('g.installing')"
     @action="installAllPacks"
+    @click="onClick"
   />
 </template>
 
@@ -31,6 +33,10 @@ const { nodePacks } = defineProps<{
 
 const isInstalling = inject(IsInstallingKey, ref(false))
 
+const onClick = (): void => {
+  isInstalling.value = true
+}
+
 const managerStore = useComfyManagerStore()
 
 const createPayload = (installItem: NodePack) => {
diff --git a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue b/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
index 34166f828..c2573981b 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, watch } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
@@ -46,7 +46,14 @@ const { nodePacks } = defineProps<{
 
 const managerStore = useComfyManagerStore()
 
-const isAllInstalled = computed(() =>
-  nodePacks.every((nodePack) => managerStore.isPackInstalled(nodePack.id))
+const isAllInstalled = ref(false)
+watch(
+  [() => nodePacks, () => managerStore.installedPacks],
+  () => {
+    isAllInstalled.value = nodePacks.every((nodePack) =>
+      managerStore.isPackInstalled(nodePack.id)
+    )
+  },
+  { immediate: true }
 )
 </script>