refac

src/lib/apis/channels/index.ts

@@ -142,7 +142,8 @@ export const getChannelMembersById = async (
 	query?: string,
 	orderBy?: string,
 	direction?: string,
-	page = 1
+	page = 1,
+	signal?: AbortSignal
 ) => {
 	let error = null;
 	let res = null;
@@ -167,6 +168,7 @@ export const getChannelMembersById = async (
 		`${WEBUI_API_BASE_URL}/channels/${channel_id}/members?${searchParams.toString()}`,
 		{
 			method: 'GET',
+			signal,
 			headers: {
 				'Content-Type': 'application/json',
 				Authorization: `Bearer ${token}`
@@ -178,6 +180,7 @@ export const getChannelMembersById = async (
 			return res.json();
 		})
 		.catch((err) => {
+			if (signal?.aborted) return null;
 			console.error(err);
 			error = err.detail;
 			return null;

src/lib/apis/users/index.ts

@@ -198,7 +198,8 @@ export const searchUsers = async (
 	query?: string,
 	orderBy?: string,
 	direction?: string,
-	page = 1
+	page = 1,
+	signal?: AbortSignal
 ) => {
 	let error = null;
 	let res = null;
@@ -221,6 +222,7 @@ export const searchUsers = async (
 
 	res = await fetch(`${WEBUI_API_BASE_URL}/users/search?${searchParams.toString()}`, {
 		method: 'GET',
+		signal,
 		headers: {
 			'Content-Type': 'application/json',
 			Authorization: `Bearer ${token}`
@@ -231,6 +233,7 @@ export const searchUsers = async (
 			return res.json();
 		})
 		.catch((err) => {
+			if (signal?.aborted) return null;
 			console.error(err);
 			error = err.detail;
 			return null;

src/lib/components/channel/MessageInput/MentionList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onDestroy, onMount } from 'svelte';
+	import { getAbortSignal, getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { channels, models } from '$lib/stores';
@@ -40,22 +40,35 @@
 			.map((u) => ({ type: 'user', id: u.id, label: u.name }))
 			.sort((a, b) => a.label.localeCompare(b.label));
 
-	const getUserList = async () => {
+	const getUserList = async (requestQuery: string, requestChannelId: string | null) => {
+		const signal = getAbortSignal();
 		const [channelMembers, searchResults] = await Promise.all([
-			channelId
+			requestChannelId
-				? getChannelMembersById(localStorage.token, channelId, query, 'name', 'asc').catch(
+				? getChannelMembersById(
-						(error) => {
+						localStorage.token,
-							console.error('Error loading channel members:', error);
+						requestChannelId,
-							return null;
+						requestQuery,
-						}
+						'name',
-					)
+						'asc',
+						1,
+						signal
+					).catch((error) => {
+						if (signal.aborted) return null;
+						console.error('Error loading channel members:', error);
+						return null;
+					})
 				: Promise.resolve(null),
-			searchUsers(localStorage.token, query).catch((error) => {
+			searchUsers(localStorage.token, requestQuery, undefined, undefined, 1, signal).catch(
-				console.error('Error searching users:', error);
+				(error) => {
-				return null;
+					if (signal.aborted) return null;
-			})
+					console.error('Error searching users:', error);
+					return null;
+				}
+			)
 		]);
 
+		if (signal.aborted) return;
+
 		const memberUsers = (channelMembers?.users ?? []) as UserSuggestion[];
 		const searchedUsers = (searchResults?.users ?? []) as UserSuggestion[];
 		const memberIds = new Set(memberUsers.map((u) => u.id));
@@ -65,7 +78,7 @@
 	};
 
 	$: if (query !== null && userSuggestions) {
-		getUserList();
+		getUserList(query, channelId);
 	}
 
 	const select = (index: number) => {