frontend-svelte/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte

<!--
    Component: FontVirtualList
    - Renders a virtualized list of fonts
    - Handles font registration with the manager
-->
<script lang="ts" generics="T extends UnifiedFont">
import {
    Skeleton,
    VirtualList,
} from '$shared/ui';
import type { ComponentProps } from 'svelte';
import { fade } from 'svelte/transition';
import { getFontUrl } from '../../lib';
import type { FontConfigRequest } from '../../model';
import {
    type UnifiedFont,
    appliedFontsManager,
} from '../../model';

interface Props extends
    Omit<
        ComponentProps<typeof VirtualList<T>>,
        'onVisibleItemsChange'
    >
{
    /**
     * Callback for when visible items change
     */
    onVisibleItemsChange?: (items: T[]) => void;
    /**
     * Callback for when near bottom is reached
     */
    onNearBottom?: (lastVisibleIndex: number) => void;
    /**
     * Weight of the font
     */
    /**
     * Weight of the font
     */
    weight: number;
    /**
     * Whether the list is in a loading state
     */
    isLoading?: boolean;
}

let {
    items,
    children,
    onVisibleItemsChange,
    onNearBottom,
    weight,
    isLoading = false,
    ...rest
}: Props = $props();

function handleInternalVisibleChange(visibleItems: T[]) {
    const configs: FontConfigRequest[] = [];

    visibleItems.forEach(item => {
        const url = getFontUrl(item, weight);

        if (url) {
            configs.push({
                id: item.id,
                name: item.name,
                weight,
                url,
                isVariable: item.features?.isVariable,
            });
        }
    });
    // Auto-register fonts with the manager
    appliedFontsManager.touch(configs);

    // Forward the call to any external listener
    // onVisibleItemsChange?.(visibleItems);
}

function handleNearBottom(lastVisibleIndex: number) {
    // Forward the call to any external listener
    onNearBottom?.(lastVisibleIndex);
}
</script>

{#key isLoading}
    <div class="relative w-full h-full" transition:fade={{ duration: 300 }}>
        {#if isLoading}
            <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
                {#each Array(5) as _, i}
                    <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-border-subtle bg-background-40">
                        <div class="flex items-center justify-between mb-3 sm:mb-4">
                            <Skeleton class="h-6 sm:h-8 w-1/3" />
                            <Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
                        </div>
                        <Skeleton class="h-24 sm:h-32 w-full" />
                    </div>
                {/each}
            </div>
        {:else}
            <VirtualList
                {items}
                {...rest}
                onVisibleItemsChange={handleInternalVisibleChange}
                onNearBottom={handleNearBottom}
            >
                {#snippet children(scope)}
                    {@render children(scope)}
                {/snippet}
            </VirtualList>
        {/if}
    </div>
{/key}