glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Controls): remove isLoading flag

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-12 12:20:52 +03:00
parent d282448c53
commit 2f45dc3620
1 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
View File

@@ -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}