fix: frontend loading issue

packages/frontend/src/lib/NavPage.spec.ts

@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom/vitest';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import NavPage from '/@/lib/NavPage.svelte';
+
+test('NavPage should have linear progress', async () => {
+  // render the component
+  render(NavPage, { loading: true, title: 'dummy' });
+
+  const content = await screen.findByLabelText('content');
+  expect(content).toBeDefined();
+  expect(content.firstChild?.nodeName).toBe('PROGRESS');
+});
+
+test('NavPage should not have linear progress', async () => {
+  // render the component
+  render(NavPage, { title: 'dummy' });
+
+  const content = await screen.findByLabelText('content');
+  expect(content).toBeDefined();
+  expect(content.firstChild).toBeNull(); // no slot content provided
+});

packages/frontend/src/lib/NavPage.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 import Fa from 'svelte-fa';
 import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
+import LinearProgress from '/@/lib/progress/LinearProgress.svelte';
 
 export let title: string;
 export let searchTerm = '';
 export let searchEnabled = true;
+export let loading = false;
 export let icon: IconDefinition | undefined = undefined;
 </script>
 
@@ -57,7 +59,11 @@ export let icon: IconDefinition | undefined = undefined;
       <slot name="tabs" />
     </div>
     <div class="flex w-full h-full overflow-auto" role="region" aria-label="content">
-      <slot name="content" />
+      {#if loading}
+        <LinearProgress/>
+      {:else}
+        <slot name="content" />
+      {/if}
     </div>
   </div>
 </div>

packages/frontend/src/pages/Model.svelte

@@ -16,7 +16,7 @@ onMount(async () => {
 })
 </script>
 
-<NavPage title="{model?.name || ''}" searchEnabled="{false}">
+<NavPage title="{model?.name || ''}" searchEnabled="{false}" loading="{model === undefined}">
   <svelte:fragment slot="tabs">
     <Tab title="Summary" url="{modelId}" />
     <Tab title="Playground" url="{modelId}/playground" />

packages/frontend/src/pages/Models.svelte

@@ -4,11 +4,11 @@ import NavPage from '../lib/NavPage.svelte';
 import Table from '../lib/table/Table.svelte';
 import { Column, Row } from '../lib/table/table';
 import { localModels } from '../stores/local-models';
-import ModelColumnName from './ModelColumnName.svelte';
-import ModelColumnRegistry from './ModelColumnRegistry.svelte';
-import ModelColumnPopularity from './ModelColumnPopularity.svelte';
-import ModelColumnLicense from './ModelColumnLicense.svelte';
-import ModelColumnHw from './ModelColumnHW.svelte';
+import ModelColumnName from '../lib/table/model/ModelColumnName.svelte';
+import ModelColumnRegistry from '../lib/table/model/ModelColumnRegistry.svelte';
+import ModelColumnPopularity from '../lib/table/model/ModelColumnPopularity.svelte';
+import ModelColumnLicense from '../lib/table/model/ModelColumnLicense.svelte';
+import ModelColumnHw from '../lib/table/model/ModelColumnHW.svelte';
 import { onDestroy, onMount } from 'svelte';
 import { studioClient } from '/@/utils/client';
 import type { Category } from '@shared/models/ICategory';
@@ -73,12 +73,9 @@ onDestroy(() => {
 
 </script>
 
-<NavPage title="Models on disk" searchEnabled="{false}">
+<NavPage title="Models on disk" searchEnabled="{false}" loading="{loading}">
   <div slot="content" class="flex flex-col min-w-full min-h-full">
     <div class="min-w-full min-h-full flex-1">
-      {#if loading}
-        <LinearProgress/>
-      {/if}
       <div class="mt-4 px-5 space-y-5 h-full">
         {#if !loading}
           {#if tasks.length > 0}

packages/frontend/src/pages/RecipeModels.svelte

@@ -2,11 +2,11 @@
   import type { ModelInfo } from '@shared/src/models/IModelInfo';
   import Table from '../lib/table/Table.svelte';
   import { Column, Row } from '../lib/table/table';
-  import ModelColumnName from './ModelColumnName.svelte';
-  import ModelColumnRegistry from './ModelColumnRegistry.svelte';
-  import ModelColumnPopularity from './ModelColumnPopularity.svelte';
-  import ModelColumnLicense from './ModelColumnLicense.svelte';
-  import ModelColumnHw from './ModelColumnHW.svelte';
+  import ModelColumnName from '../lib/table/model/ModelColumnName.svelte';
+  import ModelColumnRegistry from '../lib/table/model/ModelColumnRegistry.svelte';
+  import ModelColumnPopularity from '../lib/table/model/ModelColumnPopularity.svelte';
+  import ModelColumnLicense from '../lib/table/model/ModelColumnLicense.svelte';
+  import ModelColumnHw from '../lib/table/model/ModelColumnHW.svelte';
   import { onMount } from 'svelte';
   import { studioClient } from '../utils/client';
 
@@ -16,7 +16,7 @@
   onMount(async () => {
     if (modelsIds && modelsIds.length > 0) {
       models = await studioClient.getModelsByIds(modelsIds);
-    }    
+    }
   })
 
   const columns: Column<ModelInfo>[] = [