From 7b848defacb9f06ba43b8ef1f4081feea788e8ef Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Thu, 11 Jun 2026 10:35:36 -0400
Subject: [PATCH] perf(ui): lazy-load user info in channel profile previews on
 hover

---
 .../Messages/Message/ProfilePreview.svelte    |  2 +-
 .../Message/UserStatusLinkPreview.svelte      | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/channel/Messages/Message/ProfilePreview.svelte b/src/lib/components/channel/Messages/Message/ProfilePreview.svelte
index 0e1d9e4076..93eaf4b51c 100644
--- a/src/lib/components/channel/Messages/Message/ProfilePreview.svelte
+++ b/src/lib/components/channel/Messages/Message/ProfilePreview.svelte
@@ -28,5 +28,5 @@
 		</button>
 	</LinkPreview.Trigger>
 
-	<UserStatusLinkPreview id={user?.id} {side} {align} {sideOffset} />
+	<UserStatusLinkPreview id={user?.id} open={openPreview} {side} {align} {sideOffset} />
 </LinkPreview.Root>
diff --git a/src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte b/src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte
index 0c8090f0d4..79db971d40 100644
--- a/src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte
+++ b/src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte';
+	import { getContext } from 'svelte';
 	import { LinkPreview } from 'bits-ui';
 
 	const i18n = getContext('i18n');
@@ -8,20 +8,25 @@
 	import UserStatus from './UserStatus.svelte';
 
 	export let id = null;
+	export let open = false;
 
 	export let side = 'top';
 	export let align = 'start';
 	export let sideOffset = 6;
 
 	let user = null;
-	onMount(async () => {
-		if (id) {
-			user = await getUserInfoById(localStorage.token, id).catch((error) => {
+	let fetched = false;
+
+	$: if (open && id && !fetched) {
+		fetched = true;
+		getUserInfoById(localStorage.token, id)
+			.then((res) => {
+				user = res;
+			})
+			.catch((error) => {
 				console.error('Error fetching user by ID:', error);
-				return null;
 			});
-		}
-	});
+	}
 </script>
 
 {#if user}