I have a suitelet which has a few body level fields, and a sublist which contains a few transaction records. When a button is clicked, it takes the body level field data, and then get each transaction from the sublist and update that info on those records. I am trying to display the message with the given code below, but it displays the message after all the records has been updated.

const processMsg = message.create({
    title: 'Processing',
    message: 'Updating records.',
    type: message.Type.INFORMATION
})
const successMsg = message.create({
    title: 'Success',
    message: 'Records have been successfully updated.',
    type: message.Type.CONFIRMATION
})
processMsg.show()
// getting the data from the body level fields and itterating the sublist and updating the records. 
processMsg.hide()
successMsg.show()

This above code updates all the records. Then display both the messages instead of displaying the processMsg first and then hiding it and displaying the successMsg. I know its due to asynchronous nature of js, but how can I resolve this?

the usual is using setTimeout with a low delay to make your code run after the message is shown

I tried using setTimeout for 2000 But it was still behaving the same. Then I tried to test it out as well. By doing

startTime = new Date()
SetTimeout(2000)
endTime = new Date()
console.log(endTime-startTime)

The above resulted in some 10ms delay instead of 2000.

you havent read the setTimeout documentation if you are using those parameters for setTimeout

my bad. Just checked it. Thank you.