svelte: Port Placeholder component from Ember (#12562)

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={{ 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>

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>