Hi everyone
I'm developing an extension that needs to perform some async operations in the paint() function.
From the documentation, I seem to understand that you can return a Promise from the paint() function, so I did something like this (code simplified for the question):
paint: function ($element, layout) {
return new qlik.Promise((resolve, reject) => {
return myAsyncOperation(layout).then(result => {
process(result); //do my rendering
return resolve();
});
});
}
When loading the page from scratch or when refreshing the page with F5 it all works as intended.
However, I have a big issue when switching from a sheet to another.
In particular, when I switch from the sheet I'm at to another that contains the extension, the paint() function gets called three times.
This wouldn't be that big of an issue (other than the performance impact), but the big problem is that the second and third calls are made when the first call has not finished execution yet! And since the paint() function awaits for some promises, what happens is:
- First call to paint() is made
- First call executes until a promise is awaited inside the code
- Second call to paint() is made
- Second call executes until a promise is awaited inside the code
- Third call to paint() is made
- First call resumes execution until the next promise in the code
- Second call resumes execution
- ...and so on, you get the idea...
- First call terminates
- Second call terminates
- Third call terminates
This alternating execution makes it impossible for me to render the extension consistently, since the HTML code is manipulated simultaneously by the two calls, leaving it in an inconsistent state.
Now, I understand why the calls are alternating, that is how promises work... the real question here is: why is the paint() method called three times, and the second and third time in the middle of the execution of the first call? And why does it only happen when I switch from one sheet to the other?
NOTE: I have an empty resize() method, so paint() is not getting called due to resize events.
