From 3e6e773313ba8775f719cb5b53e71ea4323b151d Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 15:50:17 +0700
Subject: [PATCH] style: add loader state on acquiring token

---
 app/components/flow/satusehat/list.vue     |  4 +---
 app/components/pub/base/service-status.vue | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index c1634333..e65e02d8 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/app/components/flow/satusehat/list.vue
@@ -18,7 +18,7 @@ const refSearchNav: RefSearchNav = {
 
 // Loading state management
 const isLoading = reactive({
-  satusehatConn: false,
+  satusehatConn: true,
 })
 
 const hreaderPrep: HeaderPrep = {
@@ -74,8 +74,6 @@ const summaryData: Summary[] = [
 
 async function callSatuSehat() {
   try {
-    isLoading.satusehatConn = true
-
     await new Promise((resolve) => setTimeout(resolve, 3000))
     service.status = 'connected'
     // service.status = 'error'
diff --git a/app/components/pub/base/service-status.vue b/app/components/pub/base/service-status.vue
index 853e0469..2724e586 100644
--- a/app/components/pub/base/service-status.vue
+++ b/app/components/pub/base/service-status.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ServiceStatus } from './service-status.type'
-import { Loader2 } from 'lucide-vue-next'
+import { Loader, Loader2 } from 'lucide-vue-next'
 import { cn } from '~/lib/utils'
 
 const props = defineProps<ServiceStatus>()
@@ -30,20 +30,19 @@ const tokenStatus = computed((): string => {
   <Card v-else class="py-6">
     <div class="flex gap-4 justify-between px-6">
       <div class="flex gap-2 items-center">
-        <span
-        :class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
+        <span :class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
           { 'bg-red-500': props.status === 'error' },
           { 'bg-blue-500': props.status !== 'error' },
-        )"
-        >
+        )">
           <Icon v-if="props.status === 'error'" name="i-lucide-cable" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
           <Icon v-else name="i-lucide-bring-to-front" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
         </span>
         <div>
           <p v-if="props.status === 'connected'" class="text-xs md:text-md font-bold">Koneksi {{ props.serviceName }}
             Aktif</p>
-          <p v-if="props.status === 'connecting'" class="flex flex-row text-xs md:text-md font-bold">Menghubungkan ke API {{
-            props.serviceName }}
+          <p v-if="props.status === 'connecting'" class="flex flex-row text-xs md:text-md font-bold">Menghubungkan ke
+            API {{
+              props.serviceName }}
             <Loader2 class="ml-2 h-4 w-4 animate-spin" />
           </p>
           <p v-if="props.status === 'error'" class="text-xs md:text-md font-bold">Koneksi ke API {{ props.serviceName
@@ -56,12 +55,13 @@ const tokenStatus = computed((): string => {
       </div>
       <div class="text-right flex flex-col items-end">
         <p class="text-xs md:text-md text-muted-foreground">Session Token</p>
-        <p
-        :class="cn('text-xs md:text-md font-bold',
+        <p v-if="props.status === 'connecting'">
+          <Loader class="ml-2 h-4 w-4 animate-spin" />
+        </p>
+        <p v-else :class="cn('text-xs md:text-md font-bold',
           { 'text-blue-500': props.sessionActive },
           { 'text-red-500': !props.sessionActive },
-        )"
-        >{{ tokenStatus }}</p>
+        )">{{ tokenStatus }}</p>
       </div>
     </div>
   </Card>