chore: Cache the dashboard app on the first load (#6774)

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

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
+      v-for="(dashboardApp, index) in dashboardApps"
-      :key="currentChat.id + '-' + activeIndex"
+      v-show="activeIndex - 1 === index"
-      :config="dashboardApps[activeIndex - 1].content"
+      :key="currentChat.id + '-' + dashboardApp.id"
+      :is-visible="activeIndex - 1 === index"
+      :config="dashboardApps[index].content"
       :current-chat="currentChat"
     />
   </div>