Dash Clientside Callbacks freezes UI when running

I recently started using clientside callbacks for making API requests, and it has significantly decreased the overall callback time. Unfortunately, the app appears to “freeze” and users cannot interact with the app until the clientside callback is completed.

Is there a way to allow user interactivity during a clientside callback or will this always be the case when we use clientside callbacks?

Thanks!

Hello @hibachi,

Could you please provide an example of how you are making the calls?

Are you using async, if not, I believe that this may be your issue.

Thanks for the quick response, @jinnyzor !

Yes, I have async set to false for an XMLHttpRequest. Please see general example below:

function generalAPIRequest (api_url, auth_header, filters, data, method='GET') {

    let request = new XMLHttpRequest();

    api_url = api_url + `?filter=${JSON.stringify(filters)}`;
    // Make initial API call
    request.open(method, api_url, false); // true creates a promise, so it wont work
    request.setRequestHeader(...auth_header);
    data ? request.send(data) : request.send()

    let resp_json = JSON.parse(request.response);

    return resp_json

}

I tried setting the async to true (i.e., request.open(method, api_url, true); but I get an Unexpected end of JSON input error, looks like it’s coming from the JSON.parse line.

I did see that we can do promises in clientside callbacks, but wasn’t sure how to set this up with filters and data args in the call as shown above for the XMLHttpRequest route. Sorry, my Javascript is not so great.

Thanks for the help!