FacetWP is braking masonry layout - wordpress

Question

I'm using FacetWP to build a filter form. Unfortunately, my masonry layout is braking when I select any option in the form. Results are presenting as a single column, instead of 3. Weird is that F5 makes the order (3 columns) right.
I was trying to use these methods: https://facetwp.com/documentation/template-configuration/ and this one: https://facetwp.com/using-facetwp-with-existing-template-files/
My code is
<div id="primary" class="content-area col-md-9 <?php echo sydney_blog_layout(); ?>">
<main id="main" class="post-wrap" role="main">
<?php
$args = array(
'post_type' => 'nieruchomosci',
'posts_per_page' => 12,
);
$query = new WP_Query( $args );?>
<?php if ( $query->have_posts() ) : ?>
<header class="page-header">
<h3 class="archive-title">Szukaj nieruchomości</h3>
</header><!-- .page-header -->
<div class="wyszukiwarka"><?php echo facetwp_display( 'facet', 'rodzaj' ); ?><?php echo facetwp_display( 'facet', 'typ' ); ?><?php echo facetwp_display( 'facet', 'lokalizacja' ); ?></div>
<div class="posts-layout facetwp-template">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( has_post_thumbnail() && ( get_theme_mod( 'index_feat_image' ) != 1 ) ) : ?>
<div class="entry-thumb">
<?php the_post_thumbnail('sydney-large-thumb'); ?>
</div>
<?php endif; ?>
<header class="entry-header">
<?php the_title( sprintf( '<h2 class="title-post entry-title">', esc_url( get_permalink() ) ), '</h2>' ); ?>
</header><!-- .entry-header -->
<div class="entry-post">
<?php the_field('cena'); ?> PLN | <?php the_field('powierzchnia'); ?> m<sup>2</sup></br>
<?php echo get_the_term_list( $post->ID, 'rodzaj', '', ', ', '' ) ?> na <?php echo get_the_term_list( $post->ID, 'typ', '', ', ', '' ) ?> w miejscowości <?php echo get_the_term_list( $post->ID, 'lokalizacja', '', ', ', '' ) ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'sydney' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-post -->
<footer class="entry-footer">
<?php sydney_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<?php endwhile; ?>
</div>
<?php the_posts_navigation(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
Any advice will be very nice.

Answer 1

Actually I got his to work (using Masonry PACKAGED v4.1.1 & imagesLoaded PACKAGED v3.1.8):
$(document).on('facetwp-loaded', function() {
var $grid = $( '.grid' ).imagesLoaded( function() {
$grid.masonry("reloadItems");
$grid.masonry( {
itemSelector : '.loop-entry',
gutter : 30,
columnWidth : 240,
isAnimated : true,
animationOptions : {
duration : 300,
easing : 'easeInOutCirc',
queue : false
}
});
});
});

Answer 2

Try reload layout on facetwp-loaded event. From your question it is unclear how a masonry layout was created. Assuming it is masonry.js, you can do layout when FacetWP finishes loading like this:
$(document).on('facetwp-loaded', function() {
// do layout when FacetWP finishes
$grid.masonry('layout');
});
Check more here
https://facetwp.com/documentation/facetwp-loaded/