UI not updating until JS function is finished

Photoshop UXP Plugin API
, , ,
1

I am attempting to update the UI of my panel via JS after the user clicks a button (disable button, update progress bar, enable button at the end) but all the UI updates appear to be blocked by the JS code until it completes.

I have tried to run executeAsModal but i cannot get that to run properly. What am i missing, it should be possible to use JS to update the UI elements while I am processing the document/layers, right?

Do I have to use API v2? How do i do that? Is the executeAsModal inline or outside my function?

2

I very much doubt, that without your code example, somebody would provide a helpful answer :thinking: Please share what exactly you’re doing and which exactly parts doesn’t work as expected

3
  1. Please use API v2
  2. Please use executeAsModal
  3. Making all performance heavy functions asynchronous will help you to make UI updates available
  4. executeAsModal offers a native progress bar and built-in mechanism to update the progress bar and message.
  5. wrap all steps that should be executed uninterrupted into single executeAsModal
4

How do i specify the v2 API?

5

You can specify it explicitly in manifest or if minimal PS version in the manifest is high enough then it does apply by default.

6

So, based on this response it sounds like we cant have code that alters the document and makes changes to the UI, is this correct?

7

I think it should be possible to do. I would need to test it a bit more. Sync batchPlay vs async batchPlay.

8

I’m just guessing here, but using .then should be non-blocking
await holds execution of the following lines until the promise is resolved/rejected while then/catch should in theory act as a callback without blocking execution

1 Like
9

Its not gated by the async/await code - it does it even with simple logic. I cant seem to update the UI while the JS code is running. This makes it so that buttons cant be disabled and new elements shown - its quite limiting.

10

Can you break your code in to multiple “await” calls? This should allow you to insert and update the UI wherever you’d like between the batchPlay/API calls. Another option might be to update the UI before calling any batchplay/APIs. I’ve noticed that if UI updates are placed after “await” calls, they execute after the “await”. But UI updates can also be placed before or in between “await” calls, and then execute in that sequence.

11

I found a way to solve the problem (or at least work around it) by making a number of different changes - updating the manifest to v5, updating the API to v2, using executeAsModal to make the required changes to the document and to provide a progress bar.

Disabling the buttons still didn’t properly work even with async/await. It isn’t clear to me how (or even if) UI updating is (properly) supported from JS code, but it works well enough for now.