Merge pull request #238 from appwrite/feat-skeleton-loader

Add skeleton loader

v2/pink-sb/src/lib/Skeleton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    type $$Props = { variant: 'circle' | 'square' | 'line'; width: number; height?: number };
+
+    export let variant: $$Props['variant'] = 'circle';
+    export let width: $$Props['width'] = 44;
+    export let height: $$Props['height'] = 100;
+</script>
+
+<div
+    class="skeleton"
+    style="width: {width}px; {variant === 'line' && `height: ${height}px;`}"
+    class:circle={variant === 'circle'}
+    class:square={variant === 'square'}
+/>
+
+<style>
+    .skeleton {
+        background-color: var(--color-bgcolor-neutral-tertiary);
+        background-image: linear-gradient(
+            90deg,
+            var(--color-bgcolor-neutral-tertiary) 25%,
+            var(--color-overlay-skeleton) 50%,
+            var(--color-bgcolor-neutral-tertiary) 75%
+        );
+        background-size: 200% 100%;
+        animation: loading 2s linear infinite;
+        border-radius: var(--border-radius-xs, 6px);
+    }
+
+    .circle {
+        border-radius: 50%;
+    }
+
+    .circle,
+    .square {
+        aspect-ratio: 1/1;
+    }
+
+    @keyframes loading {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+</style>

v2/pink-sb/src/lib/index.ts

@@ -19,6 +19,7 @@ export { default as ActionList } from './action-list/index.js';
 export { default as Upload } from './upload/index.js';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Empty } from './Empty.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
 export { default as Keyboard } from './Keyboard.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Pagination } from './Pagination.svelte';

v2/pink-sb/src/stories/Skeleton.stories.svelte

@@ -0,0 +1,34 @@
+<script context="module" lang="ts">
+    import { Skeleton } from '$lib/index.js';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Story } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/Skeleton',
+        component: Skeleton,
+        args: {
+            variant: 'circle',
+            width: 44,
+            height: 12
+        },
+        argTypes: {
+            variant: {
+                options: ['circle', 'square', 'line'],
+                control: { type: 'select' }
+            }
+        }
+    };
+</script>
+
+<div class="wrapper">
+    <Story name="Default" let:args>
+        <Skeleton {...args} />
+    </Story>
+</div>
+
+<style>
+    .wrapper {
+        margin: 100px auto;
+        width: 400px;
+    }
+</style>

v2/pink-sb/src/themes/dark.json

@@ -108,6 +108,7 @@
     "color-overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
     "color-overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
     "color-overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
+    "color-overlay-skeleton": "rgba(255, 255, 255, 8%)",
     "color-overlay-scrim": "rgba(0, 0, 0, 48%)",
     "gradient-border-button-secondary-bottom": "var(--color-border-neutral-strong)",
     "gradient-border-button-secondary-top": "var(--color-border-neutral)",

v2/pink-sb/src/themes/light.json

@@ -108,6 +108,7 @@
     "color-overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
     "color-overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
     "color-overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
+    "color-overlay-skeleton": "rgba(25, 25, 28, 4%)",
     "color-overlay-scrim": "rgba(25, 25, 28, 80%)",
     "gradient-border-button-secondary-bottom": "var(--color-border-neutral)",
     "gradient-border-button-secondary-top": "var(--color-border-neutral-strong)",