refac

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>

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}