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/pub/base/data-table.vue

@@ -10,30 +10,35 @@ defineProps<{
   funcHtml: Record<string, (row: any) => string>
   funcComponent: Record<string, (row: any, idx: number) => any>
 }>()
+
+const pullData = inject('pull_data') as any
 </script>
 
 <template>
   <Table>
-
     <TableHeader class="bg-gray-50">
       <TableRow>
-        <TableHead
-v-for="(h, idx) in header[0]" :key="`head-${idx}`"
-          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
->
+        <TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }">
           {{ h.label }}
         </TableHead>
       </TableRow>
     </TableHeader>
 
-    <TableBody>
+    <TableBody v-if="pullData.dataListLoading">
+      <!-- Loading state with 5 skeleton rows -->
+      <TableRow v-for="n in 5" :key="`skeleton-${n}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`">
+          <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+    <TableBody v-else>
       <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
           <!-- If funcComponent has a renderer -->
-          <component
-:is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)"
-/>
+          <component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
+            v-bind="funcComponent[key](row, rowIndex)" />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
             <!-- Use v-html for funcHtml to render HTML content -->

app/components/pub/nav/header/prep.vue

@@ -3,19 +3,19 @@ import type { HeaderPrep, RefSearchNav } from '../types.ts'
 
 const props = defineProps<{
   prep: HeaderPrep
-  refSearchNav: RefSearchNav
+  refSearchNav?: RefSearchNav
 }>()
 
 function emitSearchNavClick() {
-  props.refSearchNav.onClick()
+  props.refSearchNav?.onClick()
 }
 
 function onInput(event: Event) {
-  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+  props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
 }
 
 function btnClick() {
-  props.prep.addNav?.onClick()
+  props.prep?.addNav?.onClick()
 }
 </script>
 
@@ -24,12 +24,13 @@ function btnClick() {
     <div class="flex items-center justify-between">
       <div class="flex items-center">
         <div class="ml-3 text-lg font-bold text-gray-900">
-          <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
+          <Icon :name="prep.icon" class="mr-2 size-4 md:size-6 align-middle" />
           {{ prep.title }}
         </div>
       </div>
       <div class="flex items-center">
-        <div class="ml-3 text-lg text-gray-900">
+        <div v-if="props.refSearchNav"
+        class="ml-3 text-lg text-gray-900">
           <Input
             type="text"
             placeholder="Search"