From 0d82f3650c57e9036940f6ad4756de191bbc2fc9 Mon Sep 17 00:00:00 2001
From: nullptr <62841684+not-nullptr@users.noreply.github.com>
Date: Fri, 15 Nov 2024 07:58:45 +0000
Subject: [PATCH] feat: use will-change to optimize transforms (#25)

---
 src/lib/components/functional/Dropdown.svelte |  4 ++++
 src/routes/+layout.svelte                     | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/lib/components/functional/Dropdown.svelte b/src/lib/components/functional/Dropdown.svelte
index 0182fbe..429dc83 100644
--- a/src/lib/components/functional/Dropdown.svelte
+++ b/src/lib/components/functional/Dropdown.svelte
@@ -14,6 +14,7 @@
 	let { options, selected = $bindable(), onselect }: Props = $props();
 
 	let open = $state(false);
+	let hover = $state(false);
 	let isUp = $state(false);
 	let dropdown = $state<HTMLDivElement>();
 
@@ -50,6 +51,8 @@
 	<button
 		class="font-display w-full min-w-fit justify-between overflow-hidden relative cursor-pointer px-3 border-2 border-solid flex items-center bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none"
 		onclick={toggle}
+		onmouseenter={() => (hover = true)}
+		onmouseleave={() => (hover = false)}
 	>
 		<!-- <p>{selected}</p> -->
 		<div
@@ -105,6 +108,7 @@
 	</button>
 	{#if open}
 		<div
+			style={hover ? "will-change: opacity, blur, transform" : ""}
 			transition:blur={{
 				duration,
 				easing: quintOut,
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 24a871e..5c22184 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -12,9 +12,12 @@
 	import { MoonIcon, SunIcon } from "lucide-svelte";
 	import { browser } from "$app/environment";
 	import JSCookie from "js-cookie";
+	import { onMount } from "svelte";
 	let { children, data } = $props();
 
 	let shouldGoBack = writable(false);
+	let navbar = $state<HTMLDivElement>();
+	let hover = $state(false);
 
 	const links = $derived<
 		{
@@ -70,6 +73,19 @@
 			});
 		}
 	});
+
+	onMount(() => {
+		const mouseEnter = () => {
+			hover = true;
+		};
+
+		const mouseLeave = () => {
+			hover = false;
+		};
+
+		navbar?.addEventListener("mouseenter", mouseEnter);
+		navbar?.addEventListener("mouseleave", mouseLeave);
+	});
 </script>
 
 <svelte:head>
@@ -102,6 +118,7 @@
 
 	<div
 		class="w-full max-w-screen-md p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt flex mb-10 mx-auto lg:mt-5"
+		bind:this={navbar}
 	>
 		<div class="md:p-1">
 			<a
@@ -200,6 +217,7 @@
 			<div class="w-full">
 				<div
 					class="absolute top-0 left-0 w-full"
+					style={hover ? "will-change: opacity, blur, transform" : ""}
 					in:blur={{
 						duration,
 						easing: quintOut,