fix: refresh issue for inference servers

Signed-off-by: axel7083 <[email protected]>

Author: axel7083

packages/frontend/src/lib/table/service/ServiceStatus.svelte

@@ -10,6 +10,13 @@ function navigateToContainer() {
   studioClient.navigateToContainer(object.container.containerId);
 }
 
+let status: string;
+let loading: boolean;
+$: {
+  status = getStatus();
+  loading = object.health === undefined && object.status !== 'stopped';
+}
+
 function getStatus(): 'RUNNING' | 'STARTING' | 'DEGRADED' | '' {
   if (object.status === 'stopped') {
     return '';
@@ -28,12 +35,10 @@ function getStatus(): 'RUNNING' | 'STARTING' | 'DEGRADED' | '' {
 }
 </script>
 
-{#key object.status}
-  {#if object.health === undefined && object.status !== 'stopped'}
-    <Spinner />
-  {:else}
-    <button on:click="{navigateToContainer}">
-      <StatusIcon status="{getStatus()}" icon="{ContainerIcon}" />
-    </button>
-  {/if}
-{/key}
+{#if loading}
+  <Spinner />
+{:else}
+  <button on:click="{navigateToContainer}">
+    <StatusIcon status="{status}" icon="{ContainerIcon}" />
+  </button>
+{/if}

packages/frontend/src/pages/InferenceServers.svelte

@@ -12,6 +12,7 @@ import Button from '/@/lib/button/Button.svelte';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { studioClient } from '/@/utils/client';
 import { router } from 'tinro';
+import { onMount } from 'svelte';
 
 const columns: Column<InferenceServer>[] = [
   new Column<InferenceServer>('Status', { width: '70px', renderer: ServiceStatus, align: 'center' }),
@@ -22,7 +23,12 @@ const columns: Column<InferenceServer>[] = [
 const row = new Row<InferenceServer>({ selectable: _service => true });
 
 let data: (InferenceServer & { selected?: boolean })[];
-$: data = $inferenceServers;
+
+onMount(() => {
+  return inferenceServers.subscribe(items => {
+    data = items;
+  });
+});
 
 let selectedItemsNumber: number;
 
@@ -53,7 +59,7 @@ function createNewService() {
     <div slot="content" class="flex flex-col min-w-full min-h-full">
       <div class="min-w-full min-h-full flex-1">
         <div class="mt-4 px-5 space-y-5">
-          {#if data.length > 0}
+          {#if data?.length > 0}
             <Table
               kind="service"
               data="{data}"