From ecdb1e016dfd705153757eb124d15e89e12e8669 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 20 Apr 2026 22:20:44 +0300
Subject: [PATCH] feat(FontApplicator): add skeleton snippet prop to replace
 blur loading state

---
 .../ui/FontApplicator/FontApplicator.svelte   | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
index f048040..fa04658 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
@@ -1,14 +1,11 @@
 <!--
     Component: FontApplicator
-    Loads fonts from fontshare with link tag
-    - Loads font only if it's not already applied
-    - Reacts to font load status to show/hide content
-    - Adds smooth transition when font appears
+    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 { prefersReducedMotion } from 'svelte/motion';
 import {
     DEFAULT_FONT_WEIGHT,
     type UnifiedFont,
@@ -33,6 +30,11 @@ interface Props {
      * Content snippet
      */
     children?: Snippet;
+    /**
+     * Shown while the font file is loading.
+     * When omitted, children render in system font until ready.
+     */
+    skeleton?: Snippet;
 }
 
 let {
@@ -40,6 +42,7 @@ let {
     weight = DEFAULT_FONT_WEIGHT,
     className,
     children,
+    skeleton,
 }: Props = $props();
 
 const status = $derived(
@@ -50,30 +53,16 @@ const status = $derived(
     ),
 );
 
-// The "Show" condition: Font is loaded OR it errored out OR it's a noTouch preview (like in search)
 const shouldReveal = $derived(status === 'loaded' || status === 'error');
-
-const transitionClasses = $derived(
-    prefersReducedMotion.current
-        ? 'transition-none' // Disable CSS transitions if motion is reduced
-        : 'transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
-);
 </script>
 
-<div
-    style:font-family={shouldReveal
-    ? `'${font.name}'`
-    : 'system-ui, -apple-system, sans-serif'}
-    class={clsx(
-        transitionClasses,
-        // If reduced motion is on, we skip the transform/blur entirely
-        !shouldReveal
-            && !prefersReducedMotion.current
-            && 'opacity-50 scale-[0.95] blur-sm',
-        !shouldReveal && prefersReducedMotion.current && 'opacity-0', // Still hide until font is ready, but no movement
-        shouldReveal && 'opacity-100 scale-100 blur-0',
-        className,
-    )}
->
-    {@render children?.()}
-</div>
+{#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}