frontend-svelte/src/routes/Page.svelte

<script lang="ts">
import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
import { FontSearch } from '$widgets/FontSearch';

/**
 * Page Component
 */

let searchContainer: HTMLElement;

let isExpanded = $state(false);
</script>

<!-- Font List -->
<div class="p-2 will-change-[height]">
    <div bind:this={searchContainer}>
        <FontSearch bind:showFilters={isExpanded} />
    </div>

    <div class="will-change-tranform transition-transform content">
        <FontDisplay />
    </div>
</div>

<style>
.content {
        /* Tells the browser to skip rendering off-screen content */
        content-visibility: auto;
        /* Helps the browser reserve space without calculating everything */
        contain-intrinsic-size: 1px 1000px;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
</style>