Ignoring status during popup[data-closed] and popup[data-ending-style]

[kylemh]

I'm not sure if this is a question or a bug or a feature request 😂

For the async examples of both Autocomplete and Combobox, there is a X.Status component which is used to render information about the listbox.

None of the examples have animations, but - if they did - the issue I'm having would become obvious:
Upon selection of an item, the status becomes pending because a new value leads to a new fetch. The downside feels like both a bad seeing-eye UX and potentially confusing for a11y: The loading state renders and is visible and announced immediately upon selecting a listbox item, but before the popup's exit animation ends.

Here's an exaggerated gif (long animation time) to visualize the above:

My solution with Tailwind from the popup classes was adding a data-status attribute on X.Status component:

'data-closed:*:data-status:hidden data-ending-style:*:data-status:hidden'

however, I wanted to suggest that somehow this idea is internalized into base-ui.

[mj12albert]

@kylemh Would you mind making a repro? Just wanna see exactly how you're animating it

I wonder if it works to conditionally render the Status component based on whether there's a selection, or handle it here:

base-ui/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx

Lines 28 to 54 in 39b7fe8

	function getStatus() {
	if (isPending) {
	return (
	<React.Fragment>
	<span
	aria-hidden
	className="inline-block size-3 animate-spin rounded-full border border-current border-r-transparent rtl:border-r-current rtl:border-l-transparent"
	/>
	Searching…
	</React.Fragment>
	);
	}
	if (error) {
	return error;
	}
	if (trimmedSearchValue === '') {
	return selectedValue ? null : 'Start typing to search people…';
	}
	if (searchResults.length === 0) {
	return `No matches for "${trimmedSearchValue}".`;
	}
	return null;
	}