Add BufferDialog component to multiple Vue files

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue

@@ -126,6 +126,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -155,6 +156,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 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/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue

@@ -368,6 +368,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -399,6 +400,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 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/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue

@@ -268,6 +268,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -300,6 +301,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/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue

@@ -201,6 +201,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -231,6 +232,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { apolloClient, queries, requestGraphQl } 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/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue

@@ -273,6 +273,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -305,6 +306,7 @@ import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient, queries, requestGraphQl } 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/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue

@@ -278,6 +278,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -310,6 +311,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/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue

@@ -278,6 +278,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -308,6 +309,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)