From 4a784dfbcb2df365a0238b197c9e972f2ef96b33 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Tue, 23 Sep 2025 01:10:11 +0100
Subject: [PATCH] fix: optimize template hover state with v-memo and release
 DOM refs on unmount

---
 .../custom/widget/WorkflowTemplateSelectorDialog.vue        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index c9361dd17..4f7c37f24 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -141,6 +141,7 @@
             v-for="template in displayTemplates"
             :key="template.name"
             ref="cardRefs"
+            v-memo="[template.name, hoveredTemplate === template.name]"
             ratio="none"
             :max-width="300"
             :min-width="200"
@@ -355,7 +356,7 @@
 
 <script setup lang="ts">
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, onMounted, provide, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
@@ -668,6 +669,9 @@ onMounted(async () => {
   await workflowTemplatesStore.loadWorkflowTemplates()
   isLoading.value = false
 })
+onBeforeUnmount(() => {
+  cardRefs.value = [] // Release DOM refs
+})
 </script>
 
 <style>