fix: load pane in rekapitulasi gangguan

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -28,7 +28,7 @@
     >
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -36,7 +36,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -593,7 +593,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -601,7 +601,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -1045,6 +1045,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -1064,11 +1066,7 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { onMounted, ref, watch } from 'vue'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
+import { onMounted, ref } from 'vue'
 import { requestGraphQl, queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1082,6 +1080,7 @@ import {
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
 import { getDataRowGroup } from '@/utils/helper'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1326,6 +1325,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1341,7 +1341,7 @@ const showDetail = () => {
   if (agreeToShowDialog.value) {
     dataSub.value = []
     dataSubSelected.value = null
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }