From e7e63f730488f81ece305e35cc50956a8eb881a1 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 19 Dec 2025 15:41:35 +0100
Subject: [PATCH 1/2] svelte: Port `LoadingSpinner` component from Ember

---
 .../components/LoadingSpinner.stories.svelte  | 25 ++++++++++
 .../src/lib/components/LoadingSpinner.svelte  | 50 +++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 svelte/src/lib/components/LoadingSpinner.stories.svelte
 create mode 100644 svelte/src/lib/components/LoadingSpinner.svelte

diff --git a/svelte/src/lib/components/LoadingSpinner.stories.svelte b/svelte/src/lib/components/LoadingSpinner.stories.svelte
new file mode 100644
index 0000000000..0955d6ffd2
--- /dev/null
+++ b/svelte/src/lib/components/LoadingSpinner.stories.svelte
@@ -0,0 +1,25 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import LoadingSpinner from './LoadingSpinner.svelte';
+
+  const { Story } = defineMeta({
+    title: 'LoadingSpinner',
+    component: LoadingSpinner,
+    tags: ['autodocs'],
+    argTypes: {
+      theme: {
+        control: 'inline-radio',
+        options: [undefined, 'light'],
+      },
+    },
+  });
+</script>
+
+<Story name="Default" />
+
+<Story name="Light Theme" args={{ theme: 'light' }} />
+
+<Story name="Custom Size" asChild>
+  <LoadingSpinner style="--spinner-size: 32px;" />
+</Story>
diff --git a/svelte/src/lib/components/LoadingSpinner.svelte b/svelte/src/lib/components/LoadingSpinner.svelte
new file mode 100644
index 0000000000..a30b03034d
--- /dev/null
+++ b/svelte/src/lib/components/LoadingSpinner.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    theme?: 'light';
+  }
+
+  let { theme, class: className, ...restProps }: Props = $props();
+</script>
+
+<div class={['spinner', theme, className]} {...restProps}>
+  <span class="sr-only">Loading...</span>
+</div>
+
+<style>
+  .spinner {
+    --spinner-color: currentcolor;
+    --spinner-bg-color: var(--gray-border);
+    --spinner-size: 16px;
+
+    display: inline-block;
+    height: var(--spinner-size);
+    width: var(--spinner-size);
+
+    &:global(.light) {
+      --spinner-bg-color: rgba(0, 0, 0, 0.2);
+    }
+
+    &::after {
+      content: ' ';
+      display: block;
+      box-sizing: border-box;
+      width: var(--spinner-size);
+      height: var(--spinner-size);
+      border-radius: 50%;
+      border: calc(var(--spinner-size) / 5.5) solid var(--spinner-color);
+      border-color: var(--spinner-bg-color) var(--spinner-bg-color) var(--spinner-color) var(--spinner-bg-color);
+      animation: spinner 1.2s linear infinite;
+    }
+  }
+
+  @keyframes spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

From d4e3cbe8c81c933919b146b808046259f596e90e Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 19 Dec 2025 15:48:30 +0100
Subject: [PATCH 2/2] svelte/PageHeader: Use `LoadingSpinner` component

---
 svelte/src/lib/components/PageHeader.svelte | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/svelte/src/lib/components/PageHeader.svelte b/svelte/src/lib/components/PageHeader.svelte
index 7e7164a54f..93a6a79d15 100644
--- a/svelte/src/lib/components/PageHeader.svelte
+++ b/svelte/src/lib/components/PageHeader.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
-  // TODO: import LoadingSpinner from './LoadingSpinner.svelte';
+  import LoadingSpinner from '$lib/components/LoadingSpinner.svelte';
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
     title?: string;
@@ -24,8 +24,7 @@
         <small class="suffix">{suffix}</small>
       {/if}
       {#if showSpinner}
-        <!-- TODO: <LoadingSpinner class="loading-spinner" data-test-spinner /> -->
-        <span class="loading-spinner" data-test-spinner>Loading...</span>
+        <LoadingSpinner style="margin-left: var(--space-2xs)" data-test-spinner />
       {/if}
     </h1>
   {/if}
@@ -49,8 +48,4 @@
     color: var(--main-color-light);
     padding-left: var(--space-2xs);
   }
-
-  .loading-spinner {
-    margin: 0 var(--space-2xs);
-  }
 </style>