feat: Improve AutoCompleteDepartment loading state (#36364)

.changeset/plenty-timers-roll.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Improves the loading state and accessibility of the `AutoCompleteDepartment` component

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();
+	});
+});

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>} />}