Add callback to addMessage(listOfMessages) method

I am importing an array of messages from a DB.

When i do messages.addMessage(array) it inserts the messages, but it doesn’t scroll to the bottom.

If i add messages through the messagebar it does scroll down automatically.

There is no event listener to deal with changes to DOM elements, i think. Should i use MutationObserver and detect changes to the '.messages' div?

I tried to add the following AFTER the addMessage():
app.views.current.$el.find('.page-content').scrollTop(2000);

But it doesn’t work, maybe the addMessage is asynchronous and when it tries to scroll there is nothing on the page yet.

addMessage/addMessages is fully synchronous operation, so any code you write after you call it will be executed after messages added to DOM

Maybe between the execution of the next line of code happens while the DOM is being changed or changes being committed?

If i use the ugly setTimeout solution it works:

app.request.get(app.data.api+'/api/guest/messages/',
  {},
  (msgs) => {
    JSON.parse(msgs).messages.map(m => msg.addMessage({ 'text':m.message, 
                                                        'name':lmda(m.msgfrom, m.guest.name, 'host'), 
                                                        'type':type[m.msgfrom]
                                                      }));
    setTimeout(() => { 
      console.log('now scrolling');
      app.views.current.$el.find('.page-content').scrollTop(2000); 
    }, 100);
  },
  (xhr)   => {},
);

And 100 milliseconds is enough on Brave Brower, but using chrome i need to set it at least to 200ms, otherwise it doesn’t work… Very weird.

I need to leave the solution to this issue, even if it’s proof of my own dumbness: messages.addMessage(array) obviously should be messages.addMessages(array) :roll_eyes: