src/routes/Page.svelte

@@ -1,12 +1,35 @@
 <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">
+<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>