Visual updates to the Photoshop UI when running a script/plugin in development?

Photoshop UXP Plugin API
,
1

when i write a photoshop script/plugin in adobe uxp, the script manipulations only appear visually in the photoshop UI once the script has completed. in adobe extendscript, the changes that the script makes appear as they occur.

i would like to be able to visually see the changes that my scripts make when I write photoshop scripts in adobe uxp. does anyone know how this can be achieved? I have already tried adding a timeout to my iterative (looping) functions and this does not yield the visual changes in photoshop. i have also tried adding a promise that resolves at the end of my loop, to see if that does it and it doesn’t. below is a code script as an example.

const fs = require('fs');
const ps = require('photoshop');
const { app, constants } = require('photoshop');
const { executeAsModal } = ps.core;
const utils = require('./utils');

const doc = app.activeDocument;
let lay = doc.activeLayers[0];

ps.core
  .executeAsModal(async () => {
    let xPosition = 0;
    let yPosition = 0;
    for (let i = 0; i < 60; i++) {
// this doesn't work... 
// await new Promise((resolve) => setTimeout(resolve, 0)); // attempting to yield control back to the application
      let dup = await lay.duplicate();
      xPosition += 30;
      yPosition += 0;
      await dup.translate(xPosition, yPosition);
    }
  })
  .catch(console.error);

if one runs the above code, no visual change is registered in photoshop until the script is complete.

any help/insight is appreciated. I am new to coding in UXP.

thanks