From ff59245a7ffe2add62989dd519c92716f008de7e Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Wed, 19 Mar 2025 07:33:47 -0700
Subject: [PATCH] [Manager] Use inject for installing button state (#3143)

---
 .../content/manager/button/PackActionButton.vue      | 12 +++++++-----
 .../dialog/content/manager/infoPanel/InfoPanel.vue   | 12 +++++++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/dialog/content/manager/button/PackActionButton.vue b/src/components/dialog/content/manager/button/PackActionButton.vue
index 91935ad185..27a03ab6d1 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="isExecuted"
+    :disabled="isInstalling"
     v-bind="$attrs"
     @click="onClick"
   >
     <span class="py-2.5 px-3">
-      <template v-if="isExecuted">
+      <template v-if="isInstalling">
         {{ loadingMessage ?? $t('g.loading') }}
       </template>
       <template v-else>
@@ -23,7 +23,9 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { ref } from 'vue'
+import { inject, ref } from 'vue'
+
+import { IsInstallingKey } from '@/types/comfyManagerTypes'
 
 const {
   label,
@@ -43,10 +45,10 @@ defineOptions({
   inheritAttrs: false
 })
 
-const isExecuted = ref(false)
+const isInstalling = inject(IsInstallingKey, ref(false))
 
 const onClick = (): void => {
-  isExecuted.value = true
+  isInstalling.value = true
   emit('action')
 }
 </script>
diff --git a/src/components/dialog/content/manager/infoPanel/InfoPanel.vue b/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
index db04e39aaa..3adeb098da 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
@@ -44,7 +44,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { whenever } from '@vueuse/core'
+import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
@@ -54,6 +55,7 @@ import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoP
 import InfoTabs from '@/components/dialog/content/manager/infoPanel/InfoTabs.vue'
 import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
 
 interface InfoItem {
@@ -66,6 +68,14 @@ const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
+const managerStore = useComfyManagerStore()
+const isInstalled = computed(() => managerStore.isPackInstalled(nodePack.id))
+const isInstalling = ref(false)
+provide(IsInstallingKey, isInstalling)
+whenever(isInstalled, () => {
+  isInstalling.value = false
+})
+
 const { isPackInstalled } = useComfyManagerStore()
 
 const { t, d, n } = useI18n()