import { SidebarItem, SidebarItemAvatarWrapper, SidebarItemTitle, Skeleton } from '@rocket.chat/fuselage';

// Placeholder row shown while the server spotlight results are still loading.
// Decorative only: it has no `role='option'` so keyboard navigation skips it
// (see useSearchNavigation), and `tabIndex={-1}` + `pointerEvents='none'` keep
// it out of reach of focus and mouse clicks. Loading is conveyed via aria-busy.
const NavBarSearchItemSkeleton = () => {
	return (
		<SidebarItem aria-hidden tabIndex={-1} style={{ pointerEvents: 'none' }}>
			<SidebarItemAvatarWrapper>
				<Skeleton variant='rect' width={20} height={20} />
			</SidebarItemAvatarWrapper>
			<SidebarItemTitle>
				<Skeleton />
			</SidebarItemTitle>
		</SidebarItem>
	);
};

export default NavBarSearchItemSkeleton;