Add BufferDialog component to various Vue files

src/components/Pages/Cico/LaporanCICO.vue

@@ -865,6 +865,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -898,6 +899,7 @@ import InputText from '@/components/InputText.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue

@@ -290,6 +290,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -316,6 +317,7 @@ import {
   exportToXLSX,
   exportToDOCX
 } from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)

src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue

@@ -325,6 +325,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -348,6 +349,7 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)

src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue

@@ -430,6 +430,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -453,6 +454,7 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)

src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue

@@ -292,6 +292,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -318,6 +319,7 @@ import {
   exportToDOCX,
   exportToXLSX
 } from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)

src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue

@@ -310,6 +310,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">

src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue

@@ -283,6 +283,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -305,6 +306,7 @@ import {
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)

src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue

@@ -303,6 +303,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -325,6 +326,7 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)

src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue

@@ -739,6 +739,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -768,6 +769,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue

@@ -460,6 +460,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -493,6 +494,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue

@@ -779,6 +779,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -813,6 +814,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue

@@ -922,6 +922,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -957,6 +958,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue

@@ -785,6 +785,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -819,6 +821,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue

@@ -787,6 +787,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -822,6 +824,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { reformatDate } from '@/utils/texts'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue

@@ -918,6 +918,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -953,6 +954,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -703,6 +703,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -739,6 +740,7 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import InputText from '@/components/InputText.vue'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue

@@ -516,6 +516,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -551,6 +552,7 @@ import InputText from '@/components/InputText.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -642,6 +642,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -676,6 +677,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue

@@ -966,6 +966,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -1001,6 +1002,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/PencarianData/PencarianData.vue

@@ -234,6 +234,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -258,6 +259,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)