[Feature Request] CommandPalette supports a loading state.

[emojiiii]

Is your feature request related to a problem? Please describe.

Yes, the feature request is related to the problem of querying API results and needing to display a loading state while the results are being fetched.

Describe the solution you'd like

The solution I would like is for the CommandPalette component to have a loading state that can be displayed while the API results are being fetched. This would help improve the user experience by letting them know that the query is being processed and that they should wait for the results.

Describe alternatives you've considered

One alternative that could be considered is to not have a loading state and just let the user wait for the results without any indication of progress. However, this could lead to confusion and frustration for the user, especially if the query takes a long time.

Additional context

[benjamincanac]

Hello @emojiiii,

I know this doesn't solve your issue but I just added an example in the documentation on how to perform async search within the CommandPalette component with the search field: https://ui.nuxtlabs.com/navigation/command-palette#async-search

What about displaying a loading icon when one of the CommandPalette group search function loads?

[emojiiii]

field: https://ui.nuxtlabs.com/navigation/command-palette#async-search

Thank you very much. I think this can serve as a temporary solution.

[benjamincanac]

@emojiiii Just made a PR to support a loadingIcon in the command palette like on the Button and Input. This is also automatically handled when using a search function. Let me know what you think!

[emojiiii]

Thank you very much for your PR. However, I believe that compared to searches like button and input, the command palette has a larger visible area, and the loading status is more prominent when placed in the center of the pane panel.

[benjamincanac]

This would imply hiding all the existing results each time you type something.

[emojiiii]

I think you are right, this could indeed lead to that issue. Maybe we can add an additional layer of mask + loading status on top of it.

By the way, could you please tell me how to set the debounce time? And how can I cancel the previous API request when making a new one?

[benjamincanac]

You can use the debounce prop that defaults to 200. To cancel the previous API request, I've never tried myself but you might want to take a look at this issue unjs/ofetch#23 about AbortController when using $fetch.