From 2f45dc3620c178ee621ae2a61b60056209321ce3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 12:20:52 +0300
Subject: [PATCH] feat(Controls): remove isLoading flag

---
 .../components/Controls.svelte                | 49 ++++++++++++-------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 61ffbb8..609cd02 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
@@ -20,11 +20,16 @@ interface Props {
     container: HTMLElement;
 }
 
-let { sliderPos, isDragging, typographyControls = $bindable<HTMLDivElement | null>(null), container }: Props = $props();
+let {
+    sliderPos,
+    isDragging,
+    typographyControls = $bindable<HTMLDivElement | null>(null),
+    container,
+}: Props = $props();
 
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
-const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
+
 const weight = $derived(comparisonStore.typography.weight);
 
 const responsive = getContext<ResponsiveManager>('responsive');
@@ -41,8 +46,18 @@ $effect(() => {
         return;
     }
 
-    const fontAConfig = { id: fontA.id, name: fontA.name, url: fontAUrl, weight: weight };
-    const fontBConfig = { id: fontB.id, name: fontB.name, url: fontBUrl, weight: weight };
+    const fontAConfig = {
+        id: fontA.id,
+        name: fontA.name,
+        url: fontAUrl,
+        weight: weight,
+    };
+    const fontBConfig = {
+        id: fontB.id,
+        name: fontB.name,
+        url: fontBUrl,
+        weight: weight,
+    };
 
     appliedFontsManager.touch([fontAConfig, fontBConfig]);
 });
@@ -73,20 +88,16 @@ $effect(() => {
         {/snippet}
     </Drawer>
 {:else}
-    {#if !isLoading}
-        <div class="absolute top-3 sm:top-6 left-3 sm:left-6 z-50">
-            <TypographyControls
-                {sliderPos}
-                {isDragging}
-                bind:wrapper={typographyControls}
-                containerWidth={container?.clientWidth}
-            />
-        </div>
-    {/if}
+    <div class="absolute top-3 sm:top-6 left-3 sm:left-6 z-50">
+        <TypographyControls
+            {sliderPos}
+            {isDragging}
+            bind:wrapper={typographyControls}
+            containerWidth={container?.clientWidth}
+        />
+    </div>
 
-    {#if !isLoading}
-        <div class="absolute bottom-3 sm:bottom-6 md:bottom-8 inset-x-3 sm:inset-x-6 md:inset-x-12">
-            <SelectComparedFonts {sliderPos} />
-        </div>
-    {/if}
+    <div class="absolute bottom-3 sm:bottom-6 md:bottom-8 inset-x-3 sm:inset-x-6 md:inset-x-12">
+        <SelectComparedFonts {sliderPos} />
+    </div>
 {/if}