diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 15a7393..c2c9ad9 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -163,6 +163,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -191,6 +192,7 @@ import gql from 'graphql-tag'
 import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index 312937a..36e6667 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -196,6 +196,7 @@
       </DxColumn>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -222,6 +223,7 @@ import { useQuery } from '@vue/apollo-composable'
 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)
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index a81876d..29fabea 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -134,6 +134,7 @@
       </DxColumn>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -153,6 +154,7 @@ import { Type14 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index ef08f98..d46ae7e 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -94,6 +94,7 @@
       </DxColumn>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -113,6 +114,7 @@ import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 14d9e18..16c4577 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -271,6 +271,7 @@
       </DxSummary>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -303,6 +304,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)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 816c77d..4f463e2 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -140,6 +140,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -169,6 +170,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)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index c59cc83..817db59 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -366,6 +366,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -397,6 +398,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)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 228df70..174d247 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -272,6 +272,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -304,6 +305,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)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 6de86b8..20c5aca 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -273,6 +273,7 @@
       </DxSummary>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -305,6 +306,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)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 262eb49..bb91242 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.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)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index fb6f97b..98aae4a 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.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)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 14b6d68..4437c9d 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/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)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index e09a375..7e1f422 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/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)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index dd93cb7..ed7f990 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/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)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index 5deeccf..312e84d 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/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)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index 40bb560..9004df6 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/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)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index 5c39e42..0e9b205 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/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)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index f416151..7806a2c 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/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)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index fbd9042..d2e6717 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -256,6 +256,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -288,6 +289,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
 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)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index ddbeb73..5e33f66 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -268,6 +268,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -300,6 +301,7 @@ import { getMonthNameShort } from '@/utils/texts'
 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)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index ce0c607..c62b68e 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -340,6 +340,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -370,6 +371,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index c7a58ef..73e0f43 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -256,6 +256,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -288,6 +289,7 @@ import { getMonthName } from '@/utils/texts'
 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)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index c331ca2..aa232a4 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -268,6 +268,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -300,6 +301,7 @@ import { getMonthNameShort } from '@/utils/texts'
 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)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index a97660a..9a641ee 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -715,6 +715,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -747,6 +748,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)
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index ec01250..bf556b9 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -127,6 +127,7 @@
       />
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -149,6 +150,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { Type17 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)