Fix visible toast messages flickering when one disappears (#4749)

Author: absidue

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) {

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 }}