From e90b2bede56ba1f6e09c337d04b9f563da78ee20 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 13:09:09 +0300
Subject: [PATCH] feat(Page): add appearance animation that is slightly delayed
 to ensure font loading and lack of FOIT

---
 src/routes/Page.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index e9177e7..bd5f546 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -4,7 +4,6 @@
 -->
 <script lang="ts">
 import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     Logo,
     Section,
@@ -17,6 +16,8 @@ import EyeIcon from '@lucide/svelte/icons/eye';
 import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
 import ScanSearchIcon from '@lucide/svelte/icons/search';
 import type { Snippet } from 'svelte';
+import { cubicIn } from 'svelte/easing';
+import { fade } from 'svelte/transition';
 
 let searchContainer: HTMLElement;
 
@@ -45,7 +46,10 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
 </script>
 
 <!-- Font List -->
-<div class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4">
+<div
+    class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4"
+    in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
+>
     <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <CodeIcon class={className} />