From e6505fc7a42ca9f3de1735939b488a18a979adcb Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 18 Apr 2023 19:44:57 -0700
Subject: [PATCH] chore: Cache the dashboard app on the first load (#6774)

---
 .../components/widgets/DashboardApp/Frame.vue      | 14 +++++++++++++-
 .../widgets/conversation/ConversationBox.vue       | 10 ++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
index c1db1ad4d..395006704 100644
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard-app--container">
+  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
     <div
       v-for="(configItem, index) in config"
       :key="index"
@@ -35,9 +35,14 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
+      hasOpenedAtleastOnce: false,
       iframeLoading: true,
     };
   },
@@ -57,6 +62,13 @@ export default {
       return { id, name, email };
     },
   },
+  watch: {
+    isVisible() {
+      if (this.isVisible) {
+        this.hasOpenedAtleastOnce = true;
+      }
+    },
+  },
 
   mounted() {
     window.onmessage = e => {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index c4e4a80c4..189b0e67c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -23,7 +23,7 @@
         :show-badge="false"
       />
     </woot-tabs>
-    <div v-if="!activeIndex" class="messages-and-sidebar">
+    <div v-show="!activeIndex" class="messages-and-sidebar">
       <messages-view
         v-if="currentChat.id"
         :inbox-id="inboxId"
@@ -41,9 +41,11 @@
       </div>
     </div>
     <dashboard-app-frame
-      v-else
-      :key="currentChat.id + '-' + activeIndex"
-      :config="dashboardApps[activeIndex - 1].content"
+      v-for="(dashboardApp, index) in dashboardApps"
+      v-show="activeIndex - 1 === index"
+      :key="currentChat.id + '-' + dashboardApp.id"
+      :is-visible="activeIndex - 1 === index"
+      :config="dashboardApps[index].content"
       :current-chat="currentChat"
     />
   </div>