show spinner before popup

[Jean Caiza]

Hello :),

I am trying to make a request to an api, or make a query with useLazyQuery with @apollo/client before opening the popup of the dropdownlist component, is there a way to do it properly, since using the beforeOpen and open properties they are executed 2 times when it changes the property args.cancel=true and has some strange behavior.

What I'm trying to do is the following:

1. Before making a query (in this case in the example it is a wait function), you must click on the component to show the popup, in order to avoid unnecessary requests.

2. when you want to show the popup, the spinner must be shown, and when the load is finished, it must be removed (hideSpinner)

3. Avoid being opened multiple times.

I hope in advance any ideas or solutions for this behavior, I appreciate your time in this query

sample:

https://stackblitz.com/edit/react-rfzfe3?file=src%2FApp.js

Regards

[UdhayaKumar Duraisamy]

For your requirements, you can use the actionBegin and actionComplete events of the DropdownList component. The actionBegin event triggers before fetching data from the remote server, and in this event, you can show the loading spinner. The actionComplete event triggers after data is successfully fetched, and in this event, you can hide the loading spinner. Please refer to the provided documentation for reference.

Documentation:

• https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#actionbegin
• https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#actioncomplete