From 3acf1f6b5a73c8a264862c4901e4887eaaf95da2 Mon Sep 17 00:00:00 2001 From: busya Date: Wed, 17 Jun 2026 14:21:16 +0300 Subject: [PATCH] refactor(frontend): migrate skeleton patterns to Skeleton component (7 files) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 77 animate-pulse instances replaced with from $lib/ui: - dashboards/+page (48 instances — loading grid) - datasets/[id]/+page (6), maintenance/+page (6), settings/+page (5) - reports/llm/[taskId]/+page (3), dashboards/[id]/+page (8) - validation-tasks/+page (1 — table skeleton with row variant) --- frontend/src/routes/dashboards/+page.svelte | 34 +++++++++---------- .../src/routes/dashboards/[id]/+page.svelte | 9 ++--- .../src/routes/datasets/[id]/+page.svelte | 14 ++++---- frontend/src/routes/maintenance/+page.svelte | 13 +++---- .../routes/reports/llm/[taskId]/+page.svelte | 7 ++-- frontend/src/routes/settings/+page.svelte | 11 +++--- .../src/routes/validation-tasks/+page.svelte | 18 ++-------- 7 files changed, 49 insertions(+), 57 deletions(-) diff --git a/frontend/src/routes/dashboards/+page.svelte b/frontend/src/routes/dashboards/+page.svelte index c3e67cea..19b670ba 100644 --- a/frontend/src/routes/dashboards/+page.svelte +++ b/frontend/src/routes/dashboards/+page.svelte @@ -25,7 +25,7 @@ import DashboardMaintenanceBadge from "$lib/components/DashboardMaintenanceBadge.svelte"; import { environmentContextStore, initializeEnvironmentContext, setSelectedEnvironment } from "$lib/stores/environmentContext.svelte.js"; - import { Button } from "$lib/ui"; + import { Button, Skeleton } from "$lib/ui"; import ColumnFilterPopover from "./ColumnFilterPopover.svelte"; import { formatDate, getPaginationRange, getSortIndicator } from "./dashboard-helpers.js"; import { DashboardHubModel } from "$lib/models/DashboardHubModel.svelte.ts"; @@ -158,28 +158,28 @@ class="grid gap-4 px-6 py-3 bg-surface-muted border-b border-border font-semibold text-[11px] uppercase tracking-wide text-text-muted" style="width: max(100%, 1460px); grid-template-columns: 40px minmax(250px,2.3fr) minmax(118px,0.9fr) minmax(70px,0.5fr) minmax(110px,0.7fr) minmax(280px,2fr) minmax(150px,1fr) 124px;" > -
-
-
-
-
-
-
-
+ + + + + + + + {#each Array(5) as _}
-
-
-
-
-
-
-
-
+ + + + + + + +
{/each} diff --git a/frontend/src/routes/dashboards/[id]/+page.svelte b/frontend/src/routes/dashboards/[id]/+page.svelte index d2638d55..fc142b83 100644 --- a/frontend/src/routes/dashboards/[id]/+page.svelte +++ b/frontend/src/routes/dashboards/[id]/+page.svelte @@ -18,6 +18,7 @@ import { openDrawerForTaskIfPreferred } from '$lib/stores/taskDrawer.svelte.js'; import { DashboardDetailModel } from '$lib/models/DashboardDetailModel.svelte'; import { ROUTES } from '$lib/routes.js'; + import { Skeleton } from '$lib/ui'; import CommitHistory from '$lib/components/git/CommitHistory.svelte'; import GitManager from '$lib/components/git/GitManager.svelte'; @@ -67,10 +68,10 @@ {#if m.isLoading}
{#each Array(3) as _} -
+ {/each}
-
+ {:else if m.dashboard}
@@ -80,7 +81,7 @@
{#if m.isThumbnailLoading} -
+ {:else if m.thumbnailUrl} Dashboard thumbnail {:else} @@ -136,7 +137,7 @@ {#if m.isValidationHistoryLoading} -
{#each Array(3) as _}
{/each}
+
{#each Array(3) as _}{/each}
{:else if m.validationHistoryError}
{m.validationHistoryError}
{:else if m.validationHistory.length === 0} diff --git a/frontend/src/routes/datasets/[id]/+page.svelte b/frontend/src/routes/datasets/[id]/+page.svelte index 38aa5c0d..1abcc1b1 100644 --- a/frontend/src/routes/datasets/[id]/+page.svelte +++ b/frontend/src/routes/datasets/[id]/+page.svelte @@ -12,7 +12,7 @@ import { onMount } from 'svelte'; import { page } from '$app/state'; import { t } from '$lib/i18n/index.svelte.js'; - import { Button } from '$lib/ui'; + import { Button, Skeleton } from '$lib/ui'; import { DatasetDetailModel } from '$lib/models/DatasetDetailModel.svelte'; let datasetId = $derived(page.params.id); @@ -65,21 +65,21 @@ {#if model.isLoading}
-
+ {#each Array(5) as _}
-
-
+ +
{/each}
-
+
{#each Array(4) as _}
-
-
+ +
{/each}
diff --git a/frontend/src/routes/maintenance/+page.svelte b/frontend/src/routes/maintenance/+page.svelte index 262e0db8..05d7ec94 100644 --- a/frontend/src/routes/maintenance/+page.svelte +++ b/frontend/src/routes/maintenance/+page.svelte @@ -17,6 +17,7 @@ import MaintenanceEventsTable from "$lib/components/MaintenanceEventsTable.svelte"; import StartMaintenanceForm from "$lib/components/StartMaintenanceForm.svelte"; import { t } from "$lib/i18n/index.svelte.js"; + import { Skeleton } from "$lib/ui"; let pageLoading = $state(true); @@ -54,17 +55,17 @@
-
+
-
-
+ +
-
+
-
+ {#each [1, 2, 3] as _, i (i)} -
+ {/each}
diff --git a/frontend/src/routes/reports/llm/[taskId]/+page.svelte b/frontend/src/routes/reports/llm/[taskId]/+page.svelte index 9c218a30..f3a55983 100644 --- a/frontend/src/routes/reports/llm/[taskId]/+page.svelte +++ b/frontend/src/routes/reports/llm/[taskId]/+page.svelte @@ -16,6 +16,7 @@ import { t } from '$lib/i18n/index.svelte.js'; import { openDrawerForTask } from '$lib/stores/taskDrawer.svelte.js'; import Icon from '$lib/ui/Icon.svelte'; + import { Skeleton } from '$lib/ui'; import { LLMReportModel } from '$lib/models/LLMReportModel.svelte'; let taskId = $derived(page.params.taskId); @@ -92,9 +93,9 @@ {#if model.screenState === 'loading'}
-
-
-
+ + +
{:else if model.task} diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte index 67deb22e..e6684f74 100644 --- a/frontend/src/routes/settings/+page.svelte +++ b/frontend/src/routes/settings/+page.svelte @@ -26,6 +26,7 @@ import { t } from "$lib/i18n/index.svelte.js"; import { api } from "$lib/api.js"; import { addToast } from "$lib/toasts.svelte.js"; + import { Skeleton } from "$lib/ui"; import { normalizeTab, @@ -137,11 +138,11 @@ {#if isLoading}
-
-
-
-
-
+ + + + +
{:else if settings} diff --git a/frontend/src/routes/validation-tasks/+page.svelte b/frontend/src/routes/validation-tasks/+page.svelte index 9c86cade..b491ef4e 100644 --- a/frontend/src/routes/validation-tasks/+page.svelte +++ b/frontend/src/routes/validation-tasks/+page.svelte @@ -10,7 +10,7 @@