how to wait for jQuery .append to finsh

_collection.html.erb

<div class="card">
  <%= image_tag (collection.designer.cover_image_url), class: "center-block" %>
  <div class="card-hover">
    <span class="card-overlay">
      <%= collection.designer.fullname %><br>
      <%= collection.designer.live_collection.name %><br>
      <%= collection.designer.location %>
    </span>
  </div>
</div>

index.html.erb

...

<div class="container card-container text-center" id="masonry-card-container">
  <%= render @collections %>  
</div>

...

index.js.erb

var $masonryContainer = $('#masonry-card-container');
var $newItems = $('<%= escape_javascript render(@collections) %>');

$masonryContainer.append($newItems.hide());

$masonryContainer.waitForImages(function() {
  
  // All descendant images have been loaded
  setTimeout(function(){
  
    // Action after append
    $newItems.show();
    $masonryContainer.isotope( 'appended', $newItems );
  
  }, 50);
});

init.js

var $container = $('#masonry-card-container');

$( window ).load(function() {
  $container.isotope({
    itemSelector: '.card',
    layoutMode: 'masonry',
    masonry: { gutter: 5 }
  });
});