From da0612942c496749b31be2f622f3f276fbc63160 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 18 Jan 2026 12:57:56 +0300
Subject: [PATCH] feat(FontApplicator): create FontApplicator component that
 register certain font and applies it to the children

---
 .../ui/FontApplicator/FontApplicator.svelte   | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/entities/Font/ui/FontApplicator/FontApplicator.svelte

diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
new file mode 100644
index 0000000..61f4680
--- /dev/null
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
@@ -0,0 +1,47 @@
+<!--
+    Component: FontApplicator
+
+    Loads fonts from fontshare with link tag
+-->
+<script lang="ts">
+import {
+    appliedFontsManager,
+} from '$entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
+
+interface Props {
+    name: string;
+    slug: string;
+    id: string;
+    className?: string;
+    children?: Snippet;
+}
+
+let { name, slug, id, className, children }: Props = $props();
+let element: Element;
+
+$effect(() => {
+    const observer = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting) {
+            appliedFontsManager.touch([id]);
+        }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+});
+
+const isLoading = $derived(appliedFontsManager.getFontStatus(id) === 'loading');
+</script>
+
+<div
+    bind:this={element}
+    style:font-family={name}
+    class={cn(
+        'transition-all duration-200 ease-out',
+        isLoading ? 'opacity-0 translate-y-1' : 'opacity-100 translate-y-0',
+        className,
+    )}
+>
+    {@render children?.()}
+</div>