From 1cb72b3b44a83f2907ca86a4039c1e2d825dfe43 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Thu, 18 Dec 2025 18:32:42 +0100
Subject: [PATCH] svelte: Port `Placeholder` component from Ember

---
 .../lib/components/Placeholder.stories.svelte | 32 ++++++++++++
 svelte/src/lib/components/Placeholder.svelte  | 51 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 svelte/src/lib/components/Placeholder.stories.svelte
 create mode 100644 svelte/src/lib/components/Placeholder.svelte

diff --git a/svelte/src/lib/components/Placeholder.stories.svelte b/svelte/src/lib/components/Placeholder.stories.svelte
new file mode 100644
index 0000000000..188a72bbbe
--- /dev/null
+++ b/svelte/src/lib/components/Placeholder.stories.svelte
@@ -0,0 +1,32 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Placeholder from './Placeholder.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Placeholder',
+    component: Placeholder,
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Default" args={{ width: '200px', height: '20px' }} />
+
+<Story name="Multiple Lines" asChild>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <Placeholder width="100%" height="20px" />
+    <Placeholder width="80%" height="20px" />
+    <Placeholder width="90%" height="20px" />
+  </div>
+</Story>
+
+<Story name="Card" asChild>
+  <div style="display: flex; gap: 16px; align-items: flex-start;">
+    <Placeholder width="80px" height="80px" radius="8px" style="flex-shrink: 0;" />
+    <div style="display: flex; flex-direction: column; gap: 8px; flex: 1;">
+      <Placeholder width="60%" height="24px" />
+      <Placeholder width="100%" height="16px" />
+      <Placeholder width="40%" height="16px" />
+    </div>
+  </div>
+</Story>
diff --git a/svelte/src/lib/components/Placeholder.svelte b/svelte/src/lib/components/Placeholder.svelte
new file mode 100644
index 0000000000..b213501315
--- /dev/null
+++ b/svelte/src/lib/components/Placeholder.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    width: string;
+    height: string;
+    radius?: string;
+    opacity?: number;
+  }
+
+  let { width, height, radius = 'var(--space-3xs)', opacity = 0.35, class: className, ...restProps }: Props = $props();
+</script>
+
+<div
+  class={['placeholder', className]}
+  style:width
+  style:height
+  style:border-radius={radius}
+  style:opacity
+  {...restProps}
+></div>
+
+<style>
+  .placeholder {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    background: linear-gradient(
+      to right,
+      var(--placeholder-bg) 8%,
+      var(--placeholder-bg2) 16%,
+      var(--placeholder-bg) 29%
+    );
+    background-size: 1200px 100%;
+    animation-name: backgroundAnimation;
+    animation-duration: 1.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes backgroundAnimation {
+    0% {
+      background-position: -500px;
+    }
+
+    100% {
+      background-position: 500px;
+    }
+  }
+</style>