From 21a7bfffa7d5e1cd970ad6bb201540193545898d Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 15 Nov 2023 15:31:23 +0100
Subject: [PATCH] Bind twofaccount data to OtpDisplay to prevent display lag

---
 .../js_vue3/views/twofaccounts/Accounts.vue   | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/resources/js_vue3/views/twofaccounts/Accounts.vue b/resources/js_vue3/views/twofaccounts/Accounts.vue
index c9ec1101..3c3afefa 100644
--- a/resources/js_vue3/views/twofaccounts/Accounts.vue
+++ b/resources/js_vue3/views/twofaccounts/Accounts.vue
@@ -36,6 +36,12 @@
     const isRenewingOTPs = ref(false)
 
     const otpDisplay = ref(null)
+    const otpDisplayProps = ref({
+        otp_type: '',
+        account : '',
+        service : '',
+        icon : '',
+    })
     const looperRefs = ref([])
     const dotsRefs = ref([])
 
@@ -126,8 +132,17 @@
             twofaccounts.select(account.id)
         }
         else {
-            showOtpInModal.value = true
-            otpDisplay.value.show(account.id);
+            // Data that should be displayed quickly by the OtpDisplay
+            // component are passed using props.
+            otpDisplayProps.value.otp_type = account.otp_type
+            otpDisplayProps.value.service = account.service
+            otpDisplayProps.value.account = account.account
+            otpDisplayProps.value.icon = account.icon
+
+            nextTick().then(() => {
+                showOtpInModal.value = true
+                otpDisplay.value.show(account.id);
+            })
         }
     }
 
@@ -317,6 +332,7 @@
         <Modal v-model="showOtpInModal">
             <OtpDisplay
                 ref="otpDisplay"
+                v-bind="otpDisplayProps"
                 @please-close-me="showOtpInModal = false">
             </OtpDisplay>
         </Modal>