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,7 +88,6 @@ $effect(() => {
         {/snippet}
     </Drawer>
 {:else}
-    {#if !isLoading}
     <div class="absolute top-3 sm:top-6 left-3 sm:left-6 z-50">
         <TypographyControls
             {sliderPos}
@@ -82,11 +96,8 @@ $effect(() => {
             containerWidth={container?.clientWidth}
         />
     </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">
         <SelectComparedFonts {sliderPos} />
     </div>
 {/if}
-{/if}