Seeking Best Practices for Handling Asynchronous Function Calls in onClick() Events

[K1NZ54]

I am currently calling an external asynchronous function within an onClick() event in my component. The code currently looks like this:

const asyncFunction = async (params) => {
  // async operations
};

const handleClick = () => {
  isLoading = true;
  await asyncFunction();
  isLoading = false;
};

I want isLoading to change states before and after the asyncFunction() resolves, effectively allowing my UI to respond according to the function's state (i.e., loading or complete).

One workaround I found involves using external states, but that feels like a hack and less clean.

Expected Behavior:

The ideal solution would allow the onClick() function to await the resolution of asyncFunction() before proceeding to set isLoading = false.

Current Behavior:

Currently, managing the asynchronous function and updating the UI state seems less clean than it could be.

Thank your for your help

[crypto-dump]

Is there any progress on this ticket?

[prevwong]

I think it's also important to consider that Reka is primarily a state management system to build no-code editors hence we also need to consider that for every feature with add - could we actually build a nice UI abstraction that the end-users could use? For example, we can easily build an UI that allows a user to select a variable from a dropdown and assign a new value to it via a text input. But I don't really know how we could ask the end user to await a function (or how would they even know if they have to await a function call).

One option is that we could just assume all function calls are asynchronous so we just update the evaluator in Reka to await all function calls before evaluating the next AST node.

Also, I would like to avoid having Reka to re-invent all of Javascript. External Functions already kind of solves this where you can provide your end users with functions that needs to do more things than what Reka supports. But we could also provide a feature in the AST where the user could just write JS code and the evaluator will just run the code via eval().