diff --git a/resources/assets/js/components/home/caseDetail/ProcessMap.vue b/resources/assets/js/components/home/caseDetail/ProcessMap.vue
index 8da4ce21d..165e82dca 100644
--- a/resources/assets/js/components/home/caseDetail/ProcessMap.vue
+++ b/resources/assets/js/components/home/caseDetail/ProcessMap.vue
@@ -15,7 +15,7 @@
 export default {
   name: "ProcessMap",
   props: {
-    data: Object,
+    data: Object
   },
   data() {
     return {
diff --git a/resources/assets/js/home/TabsCaseDetail.vue b/resources/assets/js/home/TabsCaseDetail.vue
index 20091af7e..605a06899 100644
--- a/resources/assets/js/home/TabsCaseDetail.vue
+++ b/resources/assets/js/home/TabsCaseDetail.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
-    <tabs>
+    <tabs @changed="changed">
       <tab :name="$t('ID_SUMMARY')">
         <PmCaseSummary :data="dataCaseSummary"> </PmCaseSummary>
       </tab>
       <tab :name="$t('ID_PROCESS_MAP')">
-        <ProcessMap :data="dataCase"> </ProcessMap>
+        <ProcessMap :data="dataCase" v-if="currentTab == $t('ID_PROCESS_MAP')">
+        </ProcessMap>
       </tab>
       <tab :name="$t('ID_CASE_HISTORY')">
         <CaseHistory :data="dataCase"> </CaseHistory>
@@ -41,11 +42,20 @@ export default {
     dataCaseSummary: Array,
   },
   data() {
-    return {};
+    return {
+      currentTab: ""
+    };
   },
 
   mounted() {},
-  methods: {},
+  methods: {
+    /**
+     * When change the tab selection
+     **/
+    changed(selectedTab) {
+      this.currentTab = selectedTab.tab.name;
+    }
+  }
 };
 </script>
 <style>