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

<!--
    Component: FontApplicator
    Applies a font to its children once the font file is loaded.
    Shows the skeleton snippet while loading; falls back to system font if no skeleton is provided.
-->
<script lang="ts">
import clsx from 'clsx';
import type { Snippet } from 'svelte';
import {
    DEFAULT_FONT_WEIGHT,
    type UnifiedFont,
    appliedFontsManager,
} from '../../model';

interface Props {
    /**
     * Font to apply
     */
    font: UnifiedFont;
    /**
     * Font weight
     * @default 400
     */
    weight?: number;
    /**
     * CSS classes
     */
    className?: string;
    /**
     * Content snippet
     */
    children?: Snippet;
    /**
     * Shown while the font file is loading.
     * When omitted, children render in system font until ready.
     */
    skeleton?: Snippet;
}

let {
    font,
    weight = DEFAULT_FONT_WEIGHT,
    className,
    children,
    skeleton,
}: Props = $props();

const status = $derived(
    appliedFontsManager.getFontStatus(
        font.id,
        weight,
        font.features?.isVariable,
    ),
);

const shouldReveal = $derived(status === 'loaded' || status === 'error');
</script>

{#if !shouldReveal && skeleton}
    {@render skeleton()}
{:else}
    <div
        style:font-family={shouldReveal ? `'${font.name}'` : 'system-ui, -apple-system, sans-serif'}
        class={clsx(className)}
    >
        {@render children?.()}
    </div>
{/if}