Add BufferDialog component to various Vue files

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)