From 97688e22c8335642b72d200ce0a865353bef5207 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 18 May 2022 21:29:41 -0500
Subject: Fix lag

---
 src/lib/AuctionPreviewTooltip.svelte | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

(limited to 'src/lib/AuctionPreviewTooltip.svelte')

diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 39a2370..26b01d9 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -5,9 +5,11 @@
 	export let preview: PreviewedAuctionData | null
 	let lastPreview: PreviewedAuctionData | null
 
-	$: lastPreview = preview ?? lastPreview
+	$: {
+		lastPreview = preview ?? lastPreview
+	}
 
-	function onClick(e: MouseEvent) {
+	function onMouseMove(e: MouseEvent) {
 		// commented out because it doesn't work: sometimes e.target is null when we click a point
 		if (e.target && !(e.target as HTMLElement).closest('.item-auction-history')) {
 			preview = null
@@ -16,29 +18,32 @@
 	}
 </script>
 
-<svelte:body on:mousemove={onClick} />
+<svelte:body on:mousemove={onMouseMove} />
 
 {#if lastPreview}
 	<div
-		id="auction-preview-tooltip"
-		class:hidden={preview === null}
-		style="left: {lastPreview.pageX}px; top: {lastPreview.pageY}px"
+		id="auction-preview-tooltip-container"
+		style={lastPreview ? `left: ${lastPreview.pageX}px; top: ${lastPreview.pageY}px` : undefined}
 		out:fade={{ duration: 100 }}
 		in:fade={{ duration: 100 }}
 	>
-		<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
-		<time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time>
+		<div id="auction-preview-tooltip">
+			<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
+			<time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time>
+		</div>
 	</div>
 {/if}
 
 <style>
-	#auction-preview-tooltip {
+	#auction-preview-tooltip-container {
 		position: absolute;
+		pointer-events: none;
+		transition: left 200ms linear, top 200ms linear;
+	}
+	#auction-preview-tooltip {
 		border: 1px solid rgba(255, 255, 255, 0.1);
 		background: rgba(0, 0, 0, 0.1);
 		padding: 0.5em;
-		transition: left 200ms, top 200ms;
-		pointer-events: none;
 	}
 
 	p {
-- 
cgit