From 11eecbef99b13ff65eea02bb17a9759df571e216 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 11:36:23 +0300
Subject: [PATCH] =?UTF-8?q?web/components/pipelines:=20make=20"running"=20?=
 =?UTF-8?q?pipeline=20icon=20spin=20=F0=9F=8C=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: eti <eti@eti.tf>
---
 .../components/repo/pipelines/PipelineCardContent.svelte  | 8 ++++++--
 web/src/lib/components/ui/Tag.svelte                      | 6 ++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
index 3a9afb2e..cb99cee9 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -131,8 +131,12 @@
 
 <div class={classes.meta()}>
 	<span class={classes.metaSub()}>
-		<Tag class="mt-px" size="large" color={STATUS_TAG_COLORS[status]} icon={STATUS_ICONS[status]}
-			>{STATUS_LABELS[status]}</Tag
+		<Tag
+			class="mt-px"
+			iconClass={STATUS_LABELS[status] === "Running" && "animate-[spin_2s_linear_infinite]"}
+			size="large"
+			color={STATUS_TAG_COLORS[status]}
+			icon={STATUS_ICONS[status]}>{STATUS_LABELS[status]}</Tag
 		>
 
 		<span class={classes.workflows()} title={longSummary(pipeline) || undefined}>
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index cc00709f..7cd926cc 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -17,7 +17,7 @@
 			size: {
 				small: "px-1 typography-paragraph-mini",
 				regular: "px-1.5 py-0.5 typography-paragraph-small",
-				large: "px-2 py-1 typography-paragraph-regular font-normal gap-2"
+				large: "gap-2 px-2 py-1 typography-paragraph-regular font-normal"
 			}
 		},
 		defaultVariants: {
@@ -40,6 +40,7 @@
 		/** Optional leading icon component (e.g. `import Hash from "$icon/hash"`). */
 		icon?: Component<SvelteHTMLElements["svg"]>;
 		class?: string;
+		iconClass?: string;
 		children?: Snippet;
 	}
 
@@ -48,6 +49,7 @@
 		size = "regular",
 		icon,
 		class: className,
+		iconClass,
 		children,
 		...rest
 	}: Props = $props();
@@ -58,7 +60,7 @@
 
 <span class={classes} {...rest}>
 	{#if Icon}
-		<Icon class="size-3 mt-px" aria-hidden="true" />
+		<Icon class="mt-px size-3 {iconClass}" aria-hidden="true" />
 	{/if}
 	{#if children}
 		{@render children()}
-- 
2.51.2