liferay
feat(@clayui/autocomplete): adds loading indicator and live announcer to infinite scrolling
Ticket LPD-55597
Well, this PR introduces improvements to the infinite scrolling mechanism used by the Autocomplete component, which also benefits the MultiSelect component. There are still a few minor adjustments needed, particularly around triggering the load more functionality via keyboard interaction—specifically, ensuring the scroll moves to the loading indicator, and after the new items are loaded, to the next item in the list.
One small caveat: the loading indicator is barely visible when the request completes very quickly. You can only consistently observe it when simulating a slower connection (e.g., 3G) in the browser—this applies to both mouse and keyboard interactions. This behavior also depends on how fast the API response is, and in the example cases, it’s a bit hard to notice.
This PR also includes improvements to the live announcer, which now behaves as a singleton and relies on a global state.
import {Announcer} from '@clayui/core';
Announcer.announce('message', 'assertive');
Looking ahead, one possible enhancement would be to move the keyboard-based load more trigger and the infinite scroll announcer logic to the Collection layer. However, I still need to identify a better pattern for that. Some of this logic could potentially go into useNavigation, but I’m not too keen on that approach, since it would make the hook responsible for handling network state awareness. A better alternative might be to create a new useCollectionAnnouncer hook that encapsulates this behavior and is easy to reuse across other components. I’ll investigate cleaner approaches in the future.
Also, a quick note: I added a deprecation warning to a few Storybook examples that still use the legacy Autocomplete implementation. These are only kept for backwards compatibility. This legacy usage caused some confusion in the ticket raised to address these problems, as the examples in question don’t reflect the current implementation of the Autocomplete component.
I fired this pr up and I'm getting an error on Async Filter, Infinite Scroller, and Async Data.
@pat270 can you try running a yarn buildTypes at the root of the project and see if this error appears for you again?
It seems that there is an error in the size build generator in two PRs. I believe it is due to the new dependencies that use new operators, but the Parcel that is being used to generate the size is a very old version. We need to work on rewriting our size generator to be compatible with these new libs.