feat(FontListItem): delete springs to imrove performance

This commit is contained in:
Ilia Mashkov
2026-02-12 11:24:16 +03:00
parent 8b02333c01
commit cee2a80c41

View File

@@ -1,11 +1,6 @@
<!--
Component: FontListItem
Displays a font item and manages its animations
-->
<script lang="ts"> <script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import { Spring } from 'svelte/motion';
import { type UnifiedFont } from '../../model'; import { type UnifiedFont } from '../../model';
interface Props { interface Props {
@@ -31,51 +26,14 @@ interface Props {
children: Snippet<[font: UnifiedFont]>; children: Snippet<[font: UnifiedFont]>;
} }
const { font, isFullyVisible, isPartiallyVisible, proximity, children }: Props = $props(); const { font, children }: Props = $props();
let timeoutId = $state<NodeJS.Timeout | null>(null);
// Create a spring for smooth scale animation
const scale = new Spring(1, {
stiffness: 0.3,
damping: 0.7,
});
// Springs react to the virtualizer's computed state
const bloom = new Spring(0, {
stiffness: 0.15,
damping: 0.6,
});
// Sync spring to proximity for a "Lens" effect
$effect(() => {
bloom.target = isPartiallyVisible ? 1 : 0;
});
$effect(() => {
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
};
});
function animateSelection() {
scale.target = 0.98;
timeoutId = setTimeout(() => {
scale.target = 1;
}, 150);
}
</script> </script>
<div <div
class={cn('pb-1 will-change-transform')} class={cn(
style:opacity={bloom.current} 'pb-1 will-change-transform transition-transform duration-200 ease-out',
style:transform=" 'hover:scale-[0.98]', // Simple CSS hover effect
scale({0.92 + (bloom.current * 0.08)}) )}
translateY({(1 - bloom.current) * 10}px)
"
> >
{@render children?.(font)} {@render children?.(font)}
</div> </div>