Appended and Prepended with ImagesLoaded

[nasif-co]

Not really a bug but rather asking for the correct way to do something in particular: In certain moments I'm trying to append/prepend items to my packery grid. However, I'd like to first load all the images in those items and once that is done, append/prepend them visually to the grid. I tried this:

$grid.append(items);
$grid.imagesLoaded( function() {
  $grid.packery('appended', items);
});

Because I thought the first line $grid.append(items) did not trigger any visual changes, but apparently it does; there is a brief moment in which the new items overlap with the others. I suspect this happens in the time between the first line running and the layout triggered by imagesLoaded taking place.

Then, I attempted to use the 'addItems' method first and then run 'layoutItems' but now it seems the items are not being added at all:

//newItems is a jQuery object that works as expected using $grid.packery('appended', items); but not here.
$grid.packery('addItems', newItems);
  let addedItems = $grid.packery( 'getItems', newItems );
  $grid.imagesLoaded( function() {
  $grid.packery('layoutItems', addedItems, false);
  });
}

Also if I managed to get this method to work, it would only append the items, I can't see how I could use it to prepend them.

Any suggestions are greatly appreciated!