How to split plugin's "work" into chunks?

Plugin and Widget API Questions
1

My plugin generates up to 10,000 frames, which takes some (long) time, therefore I wanted to give some measurable feedback to the user (real progress bar, or show some of the generated frames). The problem is that this takes 100% of the thread, so I can’t communicate with the UI while the work is being done.

In Figma’s Documentation – I read that you can “Split your work into chunks”, but I am not sure how I can do that. Could you advise it? I am generating 10,000 frames via one loop. Is there a way to stop the loop eg. every 1,000 frames, display some feedback to the user, and then return to continue the loop?

Logging to console works with each loop step.

2

Splitting the work into chunks means you need to pause the process every 100 items for example: make a pause in the processing so that UI could update, then continue. Technically I do it by putting the processing into an async function that gets paused every X items processed. I use a simple delay function and pause the work every so often.

function delay(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

async function processChunks() {
  for (let i = 0; i < 10000; i++) {
    figma.createFrame() // do something
    if (i %  100 === 0) {
      await delay(40) // pause for 40ms every 100 items
      // usually this is enough for UI to update
    }
  }
}

processChunks()
2 Likes