feat(loading-state): add loading indicators and skeleton UI for data tables

- Implement loading state management across patient, doctor and satusehat lists
- Add skeleton loading UI for data tables during data fetching
- Refactor loading state variable naming for consistency
- Make search nav optional in header component
- Update icon sizing in header for better responsiveness
- Implement url search params query state at satusehat

app/components/flow/doctor/list.vue

@@ -15,6 +15,10 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
+const isLoading = reactive({
+  dataListLoading: false,
+})
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
@@ -28,13 +32,16 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-useAsyncData('getDoctor', () => xfetch('/api/v1/doctor'), { server: false, immediate: true })
 
 async function getDoctorList() {
+  isLoading.dataListLoading = true
+
   const resp = await xfetch('/api/v1/doctor')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
+
+  isLoading.dataListLoading = false
 }
 
 onMounted(() => {
@@ -44,9 +51,10 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('pull_data', isLoading)
 </script>
 
 <template>
   <PubNavHeaderPrep :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <AppDoctorList :data="data" />
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>