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 fontAConfig = {
-    const fontBConfig = { id: fontB.id, name: fontB.name, url: fontBUrl, weight: weight };
+        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">
-        <div class="absolute top-3 sm:top-6 left-3 sm:left-6 z-50">
+        <TypographyControls
-            <TypographyControls
+            {sliderPos}
-                {sliderPos}
+            {isDragging}
-                {isDragging}
+            bind:wrapper={typographyControls}
-                bind:wrapper={typographyControls}
+            containerWidth={container?.clientWidth}
-                containerWidth={container?.clientWidth}
+        />
-            />
+    </div>
-        </div>
-    {/if}
 
-    {#if !isLoading}
+    <div class="absolute bottom-3 sm:bottom-6 md:bottom-8 inset-x-3 sm:inset-x-6 md:inset-x-12">
-        <div class="absolute bottom-3 sm:bottom-6 md:bottom-8 inset-x-3 sm:inset-x-6 md:inset-x-12">
+        <SelectComparedFonts {sliderPos} />
-            <SelectComparedFonts {sliderPos} />
+    </div>
-        </div>
-    {/if}
 {/if}