Refactor component structure and add BufferDialog component

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue

@@ -10,8 +10,14 @@
     />
   </Filters>
 
-  <Anomali_LAPPGU_LPT :data="data" :loading="loadingData" :filters="filters" />
+  <Anomali_LAPPGU_LPT
+    :data="data"
+    :filters="filters"
+    @update:loading-sub-data="loadingData = $event"
+  />
   <Anomali_LAPPGU_LPP :data="dataSecond" />
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -23,6 +29,7 @@ import { onMounted, ref, watch } from 'vue'
 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)