Macy.js with Load More Button

How To
1

I have a section displaying testimonials which are dynamically being pulled in using ACF. So far they work just fine as it is set to display 4 testimonial cards at a time. I’m using macy.js to arrange the cards in a masonry layout. The problem is that the layout breaks when I click the Load More button. I can see that macy.js has a function to recalculate the layout for events like this. But I’m not sure how to trigger recalculation with the Load more query loop interaction that it bound to the button. I have a video to demonstrate the problem.

Here’s my initialization snippet too:

document.addEventListener('DOMContentLoaded', function() {
    var macy = Macy({
        container: '#testimonial-list',
        trueOrder: false,
        waitForImages: false,
        margin: 18,
        columns: 2,
        breakAt: {
            940: 2,
            520: 1,
            400: 1
        }
    });