Add BufferDialog component to various Vue files

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)