# UI not updating until JS function is finished

**URL:** <https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164>\
**Category:** UXP Plugin API\
**Tags:** ui, bug, uxp, javascript\
**Created:** [April 8, 2023, 6:26am UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164 "2023-04-08T06:26:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jpheneger](https://avatars.discourse-cdn.com/v4/letter/j/3be4f8/32.png) [@jpheneger](https://forums.creativeclouddeveloper.com/u/jpheneger)\
**Post date:** [April 8, 2023, 6:26am UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/1 "2023-04-08T06:26:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [April 8, 2023, 7:43am UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/2 "2023-04-08T07:43:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [April 8, 2023, 10:21am UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/3 "2023-04-08T10:21:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jpheneger](https://avatars.discourse-cdn.com/v4/letter/j/3be4f8/32.png) [@jpheneger](https://forums.creativeclouddeveloper.com/u/jpheneger)\
**Post date:** [April 8, 2023, 8:21pm UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/4 "2023-04-08T20:21:32Z")

</div>

How do i specify the v2 API?

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [April 8, 2023, 9:49pm UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/5 "2023-04-08T21:49:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jpheneger](https://avatars.discourse-cdn.com/v4/letter/j/3be4f8/32.png) [@jpheneger](https://forums.creativeclouddeveloper.com/u/jpheneger)\
**Post date:** [April 8, 2023, 10:45pm UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/6 "2023-04-08T22:45:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [April 14, 2023, 5:36pm UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/7 "2023-04-14T17:36:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Maher](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/maher/32/1432_2.png) [@Maher](https://forums.creativeclouddeveloper.com/u/Maher)\
**Post date:** [April 14, 2023, 6:58pm UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/8 "2023-04-14T18:58:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jpheneger](https://avatars.discourse-cdn.com/v4/letter/j/3be4f8/32.png) [@jpheneger](https://forums.creativeclouddeveloper.com/u/jpheneger)\
**Post date:** [April 14, 2023, 10:05pm UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/9 "2023-04-14T22:05:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AnthonyK](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@AnthonyK](https://forums.creativeclouddeveloper.com/u/AnthonyK)\
**Post date:** [April 15, 2023, 4:39pm UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/10 "2023-04-15T16:39:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jpheneger](https://avatars.discourse-cdn.com/v4/letter/j/3be4f8/32.png) [@jpheneger](https://forums.creativeclouddeveloper.com/u/jpheneger)\
**Post date:** [April 18, 2023, 2:51am UTC](https://forums.creativeclouddeveloper.com/t/ui-not-updating-until-js-function-is-finished/6164/11 "2023-04-18T02:51:17Z")

</div>

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.
