From 31084be5cedbfe5f2c59157ea5c5fe5cb7a90653 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 25 Aug 2025 13:33:28 +0700
Subject: [PATCH] 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    |  12 +-
 app/components/flow/patient/list.vue   |   6 +-
 app/components/flow/satusehat/list.vue | 207 ++++++++++++-------------
 app/components/pub/base/data-table.vue |  25 +--
 app/components/pub/nav/header/prep.vue |  13 +-
 5 files changed, 139 insertions(+), 124 deletions(-)

diff --git a/app/components/flow/doctor/list.vue b/app/components/flow/doctor/list.vue
index c6007660..8615a5a1 100644
--- a/app/components/flow/doctor/list.vue
+++ b/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>
diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 3131d81d..4eee1912 100644
--- a/app/components/flow/patient/list.vue
+++ b/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>
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index b2512432..a35aecc1 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/app/components/flow/satusehat/list.vue
@@ -2,24 +2,27 @@
 import type { ServiceStatus } from '~/components/pub/base/service-status.type'
 import type { Summary } from '~/components/pub/base/summary-card.type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import { useUrlSearchParams } from '@vueuse/core'
 import { CircleCheckBig, CircleDashed, CircleX, Ellipsis, Search, Send } from 'lucide-vue-next'
 
 // State management
 const data = ref([])
 const isLoading = reactive({
   satusehatConn: true,
-  dataList: false,
+  dataListLoading: false,
 })
 
-// Filter states
-const filters = reactive({
-  search: '',
-  status: '',
-  resource_type: 'all',
-  date_from: '',
-  date_to: '',
-  page: 1,
-  limit: 10,
+const params = useUrlSearchParams('history', {
+  initialValue: {
+    search: '',
+    status: '',
+    resource_type: 'all',
+    date_from: '',
+    date_to: '',
+    page: 1,
+    limit: 10,
+  },
+  removeFalsyValues: true,
 })
 
 // Pagination state
@@ -35,17 +38,17 @@ const pagination = ref({
 // API function to fetch data
 async function fetchData() {
   try {
-    isLoading.dataList = true
+    isLoading.dataListLoading = true
     const response: any = await $fetch('/api/v1/satusehat/list', {
       method: 'POST',
       body: {
-        status: filters.status !== '' ? Number(filters.status) : undefined,
-        resource_type: filters.resource_type,
-        date_from: filters.date_from,
-        date_to: filters.date_to,
-        search: filters.search,
-        page: filters.page,
-        limit: filters.limit,
+        status: params.status !== '' ? Number(params.status) : undefined,
+        resource_type: params.resource_type,
+        date_from: params.date_from,
+        date_to: params.date_to,
+        search: params.search,
+        page: params.page,
+        limit: params.limit,
       },
     })
 
@@ -56,26 +59,19 @@ async function fetchData() {
   } catch (error) {
     console.error('Error fetching data:', error)
   } finally {
-    isLoading.dataList = false
+    isLoading.dataListLoading = false
   }
 }
 
 // Debounced search function
-const debouncedFetchData = useDebounceFn(fetchData, 500)
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
   },
   onInput: (val: string) => {
-    filters.search = val
-    filters.page = 1
-    debouncedFetchData()
   },
   onClear: () => {
-    filters.search = ''
-    filters.page = 1
-    fetchData()
   },
 }
 
@@ -83,23 +79,9 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-// Filter change handlers
-function onStatusChange(status: string) {
-  filters.status = status
-  filters.page = 1
-  fetchData()
-}
-
 function onResourceTypeChange(resourceType: string) {
-  filters.resource_type = resourceType
-  filters.page = 1
-  fetchData()
-}
-
-function onDateRangeChange(dateFrom: string, dateTo: string) {
-  filters.date_from = dateFrom
-  filters.date_to = dateTo
-  filters.page = 1
+  params.resource_type = resourceType
+  params.page = 1
   fetchData()
 }
 
@@ -167,7 +149,7 @@ async function callSatuSehat() {
 }
 
 // Watch for tab changes
-watch(() => filters.resource_type, (newType) => {
+watch(() => params.resource_type, (newType) => {
   onResourceTypeChange(newType)
 })
 
@@ -179,6 +161,7 @@ onMounted(async () => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('pull_data', isLoading)
 
 const tabs = [
   {
@@ -201,36 +184,29 @@ const tabs = [
 
 // Status filter options
 const statusOptions = [
-  { value: '', label: 'Semua Status' },
   { value: '0', label: 'Failed' },
   { value: '1', label: 'Pending' },
   { value: '2', label: 'Success' },
 ]
 const actions = [
-  {
-    value: 'filter',
-    label: 'Filter',
-    icon: 'i-lucide-list-filter',
-  },
   {
     value: 'export',
     label: 'Ekspor',
     icon: 'i-lucide-download',
-
   },
 ]
 
 // Sync activeTabFilter with filters.resource_type
 const activeTabFilter = computed({
-  get: () => filters.resource_type,
+  get: () => params.resource_type,
   set: (value) => {
-    filters.resource_type = value
+    params.resource_type = value
   },
 })
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="headerPrep" :ref-search-nav="refSearchNav" />
+  <PubNavHeaderPrep :prep="headerPrep" />
   <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
     <PubBaseServiceStatus v-bind="service" />
     <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn" :summary-data="summaryData" />
@@ -240,83 +216,104 @@ const activeTabFilter = computed({
     <Tabs v-model="activeTabFilter">
       <div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between">
         <TabsList>
-          <TabsTrigger
-            v-for="tab in tabs"
-            :key="tab.value"
-            :value="tab.value"
-            class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700"
-          >
+          <TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value"
+            class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700">
             {{ tab.label }}
           </TabsTrigger>
         </TabsList>
         <div class="flex gap-2 items-center">
-          <!-- Status Filter -->
-          <Select v-model="filters.status" @update:model-value="onStatusChange">
-            <SelectTrigger class="w-40 h-9">
-              <SelectValue placeholder="Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem v-for="option in statusOptions" :key="option.value" :value="option.value">
-                {{ option.label }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-
-          <!-- Date Range Picker -->
-          <AppSatusehatPicker @date-change="onDateRangeChange" />
 
           <!-- Search Input -->
+
           <div class="relative w-full max-w-sm">
-            <Input
-              id="search"
-              v-model="filters.search"
-              type="text"
-              placeholder="Cari pasien..."
-              class="pl-7 h-9"
-              @input="refSearchNav.onInput(filters.search)"
-            />
-            <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-              <Search class="size-4 text-muted-foreground" />
-            </span>
+
+            <Dialog>
+              <DialogTrigger>
+                <Input id="search" v-model="params.search" type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader class="border-b-1">
+                  <DialogTitle class="pb-2">Pencarian</DialogTitle>
+                </DialogHeader>
+                <Form>
+                  <FormField v-slot="{ componentField }" name="username">
+                    <FormItem>
+                      <FormLabel>Pasien</FormLabel>
+                      <FormControl>
+                        <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
+                      </FormControl>
+                    </FormItem>
+                  </FormField>
+                  <FormField v-slot="{ componentField }" name="status">
+                    <FormItem>
+                      <FormLabel>Status</FormLabel>
+                      <FormControl>
+                        <Select>
+                          <SelectTrigger class="bg-white border border-gray-300">
+                            <SelectValue class="text-gray-400" placeholder="-- select item" />
+                          </SelectTrigger>
+                          <SelectContent class="bg-white ">
+                            <SelectItem value="0">
+                              Gagal
+                            </SelectItem>
+                            <SelectItem value="1">
+                              Pending
+                            </SelectItem>
+                            <SelectItem value="2">
+                              Terkirim
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                    </FormItem>
+                  </FormField>
+                  <FormField v-slot="{ componentField }" name="fhirId">
+                    <FormItem>
+                      <FormLabel>FHIR ID</FormLabel>
+                      <FormControl>
+                        <Input type="text" placeholder="fhir id" v-bind="componentField" />
+                      </FormControl>
+                    </FormItem>
+                  </FormField>
+                </Form>
+
+                <DialogFooter>
+                  <Button variant="outline">
+                    Reset
+                  </Button>
+                  <Button>
+                    Apply
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
           </div>
 
           <!-- Action Buttons -->
-          <AppSatusehatButtonAction
-            v-for="action in actions"
-            :key="action.value"
-            :icon="action.icon"
-            :text="action.label"
-          />
+          <AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
+            :text="action.label" />
         </div>
       </div>
       <div class="mt-4">
         <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
           <div class="rounded-md border p-4">
-            <Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" class="size-6 animate-pulse text-muted-foreground mx-auto" />
-            <AppSatusehatList v-if="!isLoading.satusehatConn && !isLoading.dataList" :data="data" />
+            <!-- <Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" -->
+              <!-- class="size-6 animate-pulse text-muted-foreground mx-auto" /> -->
+            <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
 
             <!-- Pagination -->
-            <div v-if="!isLoading.satusehatConn && !isLoading.dataList && pagination.total > 0" class="mt-4 flex justify-between items-center">
+            <div v-if="!isLoading.satusehatConn && !isLoading.dataListLoading && pagination.total > 0"
+              class="mt-4 flex justify-between items-center">
               <div class="text-sm text-muted-foreground">
                 Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
                 {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
                 dari {{ pagination.total }} data
               </div>
               <div class="flex gap-2">
-                <Button
-                  v-if="pagination.has_prev"
-                  variant="outline"
-                  size="sm"
-                  @click="filters.page--; fetchData()"
-                >
+                <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="params.page--; fetchData()">
                   Sebelumnya
                 </Button>
-                <Button
-                  v-if="pagination.has_next"
-                  variant="outline"
-                  size="sm"
-                  @click="filters.page++; fetchData()"
-                >
+                <Button v-if="pagination.has_next" variant="outline" size="sm" @click="params.page++; fetchData()">
                   Selanjutnya
                 </Button>
               </div>
diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table.vue
index b0d2748a..3e76bbb8 100644
--- a/app/components/pub/base/data-table.vue
+++ b/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 -->
diff --git a/app/components/pub/nav/header/prep.vue b/app/components/pub/nav/header/prep.vue
index 8bd33696..d83aaeb4 100644
--- a/app/components/pub/nav/header/prep.vue
+++ b/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"