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/patient/list.vue

@@ -20,8 +20,9 @@ const refSearchNav: RefSearchNav = {
 // Loading state management
 const isLoading = reactive({
   summary: false,
-  table: false,
+  dataListLoading: false,
 })
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
@@ -82,11 +83,13 @@ async function getPatientSummary() {
 }
 
 async function getPatientList() {
+  isLoading.dataListLoading = true
   const resp = await xfetch('/api/v1/patient')
   console.log('data patient', resp)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
+  isLoading.dataListLoading = false
 }
 
 onMounted(() => {
@@ -97,6 +100,7 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('pull_data', isLoading)
 </script>
 
 <template>