diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte index 957c86d..0d21abe 100644 --- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte +++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte @@ -40,6 +40,10 @@ interface Props extends * Skeleton snippet */ skeleton?: Snippet; + /** + * Empty-state snippet rendered when the query settled with zero fonts + */ + empty?: Snippet; } let { @@ -47,6 +51,7 @@ let { onVisibleItemsChange, weight, skeleton, + empty, ...rest }: Props = $props(); @@ -59,6 +64,8 @@ let isCatchingUp = $state(false); const showInitialSkeleton = $derived(!!skeleton && isLoading && fontCatalogStore.fonts.length === 0); const showCatchupSkeleton = $derived(!!skeleton && isCatchingUp); +// Settled query with no matches — empty state replaces the (otherwise blank) list. +const showEmpty = $derived(!!empty && !isLoading && !isCatchingUp && fontCatalogStore.fonts.length === 0); function handleInternalVisibleChange(items: UnifiedFont[]) { visibleFonts = items; @@ -163,6 +170,10 @@ function handleNearBottom(_lastVisibleIndex: number) {
{@render skeleton()}
+ {:else if showEmpty && empty} +
+ {@render empty()} +
{:else} + {#snippet empty()} +
+ +
+ {/snippet} + {#snippet skeleton()}
{#each { length: 50 } as _, index (index)}