svelte: Port Placeholder component from Ember

Author: Turbo87

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={{ style: 'width: 200px; height: 20px; border-radius: 4px;' }} />
+
+<Story name="Multiple Lines" asChild>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <Placeholder style="width: 100%; height: 20px; border-radius: 4px;" />
+    <Placeholder style="width: 80%; height: 20px; border-radius: 4px;" />
+    <Placeholder style="width: 90%; height: 20px; border-radius: 4px;" />
+  </div>
+</Story>
+
+<Story name="Card" asChild>
+  <div style="display: flex; gap: 16px; align-items: flex-start;">
+    <Placeholder style="width: 80px; height: 80px; border-radius: 8px; flex-shrink: 0;" />
+    <div style="display: flex; flex-direction: column; gap: 8px; flex: 1;">
+      <Placeholder style="width: 60%; height: 24px; border-radius: 4px;" />
+      <Placeholder style="width: 100%; height: 16px; border-radius: 4px;" />
+      <Placeholder style="width: 40%; height: 16px; border-radius: 4px;" />
+    </div>
+  </div>
+</Story>

svelte/src/lib/components/Placeholder.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class="placeholder {className}" {...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>