From 4f69c33de0e9a8fde4f16d0b2f1ed8aac8741772 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 16 Jun 2026 23:52:33 +0200
Subject: [PATCH] refac

---
 .../Messages/Message/ProfilePreview.svelte    |  2 +-
 .../Message/UserStatusLinkPreview.svelte      | 30 ++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/channel/Messages/Message/ProfilePreview.svelte b/src/lib/components/channel/Messages/Message/ProfilePreview.svelte
index 0e1d9e4076..a852c2bd48 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} {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..0e235c3baa 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');
@@ -7,21 +7,35 @@
 
 	import UserStatus from './UserStatus.svelte';
 
-	export let id = null;
+	export let id: string | null = null;
+	export let openPreview = 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 requestedUserId: string | null = null;
+
+	const loadUser = async (userId: string) => {
+		requestedUserId = userId;
+
+		const loadedUser = await getUserInfoById(localStorage.token, userId).catch((error) => {
+			if (requestedUserId === userId) {
 				console.error('Error fetching user by ID:', error);
-				return null;
-			});
+			}
+
+			return null;
+		});
+
+		if (requestedUserId === userId) {
+			user = loadedUser;
 		}
-	});
+	};
+
+	$: if (openPreview && id && id !== requestedUserId) {
+		loadUser(id);
+	}
 </script>
 
 {#if user}