Merge pull request #12561 from Turbo87/svelte-loading-spinner

svelte: Port `LoadingSpinner` component from Ember.js app

Author: Turbo87

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>

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>

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>