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(null), container }: Props = $props(); +let { + sliderPos, + isDragging, + typographyControls = $bindable(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('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} {:else} - {#if !isLoading} -
- -
- {/if} +
+ +
- {#if !isLoading} -
- -
- {/if} +
+ +
{/if}