CardProductSkeleton

Component

Storybook

Figma Demo

Guidelines

Variations

The CardProductSkeleton matches the dimensions and variants of the CardProduct component. As new card types are explored, other sizes may be added to the component.

• default: The default CardProduct skeleton.
• carousel: The carousel CardProduct skeleton.
• list: The list CardProduct skeleton.

Usage

Skeleton card dimensions should match their actual component counterparts so that it isn’t jarring when real cards load in.

Component Specs

API

• testId: string | Default: undefined
  A test ID for the component, useful for testing purposes.
• variant: 'default' | 'carousel' | 'list' | Default: 'default' The variant of the CardProductSkeleton to render.

Example

<script lang="ts">
	import { CardProductSkeleton } from '@getprovi/craft-svelte';
	let loading = true;
</script>

{#if loading}
	<CardProductSkeleton />
	<CardProductSkeleton variant="carousel" testId="test-carousel-skeleton" />
	<CardProductSkeleton variant="list" />
{:else}
	<CardProduct />
	<CardProduct variant="carousel" />
	<CardProduct variant="list" />
{/if}