From 20dd6da67eb7ca2073339c8db099d2dc4cfed220 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Tue, 24 Jun 2025 11:09:53 -0300
Subject: [PATCH 1/3] feat: improved loading state in AutoCompleteDepartment

---
 .../client/components/AutoCompleteDepartment.tsx     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/components/AutoCompleteDepartment.tsx b/apps/meteor/client/components/AutoCompleteDepartment.tsx
index 967a4197f974d..305cc83a6c521 100644
--- a/apps/meteor/client/components/AutoCompleteDepartment.tsx
+++ b/apps/meteor/client/components/AutoCompleteDepartment.tsx
@@ -26,6 +26,7 @@ const AutoCompleteDepartment = ({
 	haveAll,
 	haveNone,
 	showArchived = false,
+	disabled,
 	...props
 }: AutoCompleteDepartmentProps): ReactElement | null => {
 	const { t } = useTranslation();
@@ -33,7 +34,11 @@ const AutoCompleteDepartment = ({
 
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);
 
-	const { data: departmentsItems, fetchNextPage } = useDepartmentsList({
+	const {
+		data: departmentsItems,
+		isPending,
+		fetchNextPage,
+	} = useDepartmentsList({
 		filter: debouncedDepartmentsFilter,
 		onlyMyDepartments,
 		haveAll,
@@ -51,9 +56,12 @@ const AutoCompleteDepartment = ({
 			value={value}
 			onChange={onChange}
 			filter={departmentsFilter}
+			disabled={isPending || disabled}
+			aria-busy={isPending}
+			aria-disabled={disabled}
 			setFilter={setDepartmentsFilter as (value?: string | number) => void}
 			options={departmentsItems}
-			placeholder={t('Select_an_option')}
+			placeholder={isPending ? t('Loading...') : t('Select_an_option')}
 			data-qa='autocomplete-department'
 			endReached={() => fetchNextPage()}
 			renderItem={({ label, ...props }) => <Option {...props} label={<span style={{ whiteSpace: 'normal' }}>{label}</span>} />}

From 3c75a9f76ea9b41429aba0ebfecba8314a8046fd Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Fri, 4 Jul 2025 14:33:54 -0300
Subject: [PATCH 2/3] test: added unit tests

---
 .../AutoCompleteDepartment.spec.tsx           | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 apps/meteor/client/components/AutoCompleteDepartment.spec.tsx

diff --git a/apps/meteor/client/components/AutoCompleteDepartment.spec.tsx b/apps/meteor/client/components/AutoCompleteDepartment.spec.tsx
new file mode 100644
index 0000000000000..a1f587634be9f
--- /dev/null
+++ b/apps/meteor/client/components/AutoCompleteDepartment.spec.tsx
@@ -0,0 +1,43 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import AutoCompleteDepartment from './AutoCompleteDepartment';
+import { useDepartmentsList } from './Omnichannel/hooks/useDepartmentsList';
+
+jest.mock('./Omnichannel/hooks/useDepartmentsList');
+
+const useDepartmentsListMocked = jest.mocked(useDepartmentsList);
+
+const appRoot = mockAppRoot().build();
+
+describe('AutoCompleteDepartment', () => {
+	beforeEach(() => {
+		useDepartmentsListMocked.mockClear();
+	});
+
+	it('should render loading state correctly', () => {
+		useDepartmentsListMocked.mockReturnValue({
+			data: [],
+			isPending: true,
+			fetchNextPage: jest.fn(),
+		} as unknown as ReturnType<typeof useDepartmentsList>);
+
+		const { rerender } = render(<AutoCompleteDepartment value='' onChange={jest.fn()} />, { wrapper: appRoot });
+
+		expect(screen.getByPlaceholderText('Loading...')).toBeInTheDocument();
+		expect(screen.queryByPlaceholderText('Select_an_option')).not.toBeInTheDocument();
+		expect(screen.getByRole('textbox')).toBeDisabled();
+
+		useDepartmentsListMocked.mockReturnValue({
+			data: [],
+			isPending: false,
+			fetchNextPage: jest.fn(),
+		} as unknown as ReturnType<typeof useDepartmentsList>);
+
+		rerender(<AutoCompleteDepartment value='' onChange={jest.fn()} />);
+
+		expect(screen.getByPlaceholderText('Select_an_option')).toBeInTheDocument();
+		expect(screen.queryByPlaceholderText('Loading...')).not.toBeInTheDocument();
+		expect(screen.getByRole('textbox')).toBeEnabled();
+	});
+});

From 215929565e3d016dcbd1d3779e36ca2c54a4ec1e Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Fri, 4 Jul 2025 14:50:13 -0300
Subject: [PATCH 3/3] chore: changeset

---
 .changeset/plenty-timers-roll.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/plenty-timers-roll.md

diff --git a/.changeset/plenty-timers-roll.md b/.changeset/plenty-timers-roll.md
new file mode 100644
index 0000000000000..a6a14bf458095
--- /dev/null
+++ b/.changeset/plenty-timers-roll.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Improves the loading state and accessibility of the `AutoCompleteDepartment` component