From 96fa73162c770cc0a9ced98d2e0f6aa5013414c9 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Mon, 7 Jul 2025 11:12:34 -0300
Subject: [PATCH] feat: Improve AutoCompleteDepartment loading state (#36364)

---
 .changeset/plenty-timers-roll.md              |  5 +++
 .../AutoCompleteDepartment.spec.tsx           | 43 +++++++++++++++++++
 .../components/AutoCompleteDepartment.tsx     | 12 +++++-
 3 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/plenty-timers-roll.md
 create mode 100644 apps/meteor/client/components/AutoCompleteDepartment.spec.tsx

diff --git a/.changeset/plenty-timers-roll.md b/.changeset/plenty-timers-roll.md
new file mode 100644
index 00000000000..a6a14bf4580
--- /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
diff --git a/apps/meteor/client/components/AutoCompleteDepartment.spec.tsx b/apps/meteor/client/components/AutoCompleteDepartment.spec.tsx
new file mode 100644
index 00000000000..a1f587634be
--- /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();
+	});
+});
diff --git a/apps/meteor/client/components/AutoCompleteDepartment.tsx b/apps/meteor/client/components/AutoCompleteDepartment.tsx
index 967a4197f97..305cc83a6c5 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>} />}