feat: Add a loader till the dashboard app is loaded (#5814)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -5,6 +5,11 @@
       :key="index"
       class="dashboard-app--list"
     >
+      <loading-state
+        v-if="iframeLoading"
+        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
+        class="dashboard-app_loading-container"
+      />
       <iframe
         v-if="configItem.type === 'frame' && configItem.url"
         :id="`dashboard-app--frame-${index}`"
@@ -16,7 +21,11 @@
 </template>
 
 <script>
+import LoadingState from 'dashboard/components/widgets/LoadingState';
 export default {
+  components: {
+    LoadingState,
+  },
   props: {
     config: {
       type: Array,
@@ -27,6 +36,11 @@ export default {
       default: () => ({}),
     },
   },
+  data() {
+    return {
+      iframeLoading: true,
+    };
+  },
   computed: {
     dashboardAppContext() {
       return {
@@ -57,6 +71,7 @@ export default {
       );
       const eventData = { event: 'appContext', data: this.dashboardAppContext };
       frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
+      this.iframeLoading = false;
     },
   },
 };
@@ -73,4 +88,11 @@ export default {
 .dashboard-app--list iframe {
   border: 0;
 }
+.dashboard-app_loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -42,7 +42,7 @@
     </div>
     <dashboard-app-frame
       v-else
-      :key="currentChat.id"
+      :key="currentChat.id + '-' + activeIndex"
       :config="dashboardApps[activeIndex - 1].content"
       :current-chat="currentChat"
     />

app/javascript/dashboard/i18n/locale/en/generalSettings.json

@@ -48,7 +48,7 @@
       }
     },
     "UPDATE_CHATWOOT": "An update %{latestChatwootVersion} for Chatwoot is available. Please update your instance.",
-    "LEARN_MORE":"Learn more"
+    "LEARN_MORE": "Learn more"
   },
   "FORMS": {
     "MULTISELECT": {
@@ -122,7 +122,6 @@
       "GO_TO_SETTINGS_ACCOUNT": "Go to Account Settings",
       "GO_TO_SETTINGS_PROFILE": "Go to Profile Settings",
       "GO_TO_NOTIFICATIONS": "Go to Notifications",
-
       "ADD_LABELS_TO_CONVERSATION": "Add label to the conversation",
       "ASSIGN_AN_AGENT": "Assign an agent",
       "ASSIGN_A_TEAM": "Assign a team",
@@ -137,5 +136,8 @@
       "UNTIL_NEXT_WEEK": "Until next week",
       "UNTIL_TOMORROW": "Until tomorrow"
     }
+  },
+  "DASHBOARD_APPS": {
+    "LOADING_MESSAGE": "Loading Dashboard App..."
   }
 }