From 251f389d4f50ee7dc9c934f1342ec340336c9771 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Wed, 6 Mar 2024 19:19:20 +0100
Subject: [PATCH] Fix visible toast messages flickering when one disappears

---
 src/renderer/components/ft-toast/ft-toast.js  | 14 ++++++++++++--
 src/renderer/components/ft-toast/ft-toast.vue | 10 +++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index a0c8bf03dae35..c85fbf55f65cc 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -1,6 +1,8 @@
 import { defineComponent } from 'vue'
 import FtToastEvents from './ft-toast-events.js'
 
+let id = 0
+
 export default defineComponent({
   name: 'FtToast',
   data: function () {
@@ -15,7 +17,9 @@ export default defineComponent({
     FtToastEvents.removeEventListener('toast-open', this.open)
   },
   methods: {
-    performAction: function (index) {
+    performAction: function (id) {
+      const index = this.toasts.findIndex(toast => id === toast.id)
+
       this.toasts[index].action()
       this.remove(index)
     },
@@ -26,7 +30,13 @@ export default defineComponent({
       toast.isOpen = false
     },
     open: function ({ detail: { message, time, action } }) {
-      const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
+      const toast = {
+        message: message,
+        action: action || (() => { }),
+        isOpen: false,
+        timeout: null,
+        id: id++
+      }
       toast.timeout = setTimeout(this.close, time || 3000, toast)
       setTimeout(() => { toast.isOpen = true })
       if (this.toasts.length > 4) {
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index 571470556d8c3..6fddb89b3826f 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="toast-holder">
     <div
-      v-for="(toast, index) in toasts"
-      :key="'toast-' + index"
+      v-for="toast in toasts"
+      :key="toast.id"
       class="toast"
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
       tabindex="0"
       role="status"
-      @click="performAction(index)"
-      @keydown.enter.prevent="performAction(index)"
-      @keydown.space.prevent="performAction(index)"
+      @click="performAction(toast.id)"
+      @keydown.enter.prevent="performAction(toast.id)"
+      @keydown.space.prevent="performAction(toast.id)"
     >
       <p class="message">
         {{ toast.message }}