Isotope Filtering with Bootstrap Tabs - Custom Post Type Query Loop in each Tab (Have to click twice to filter)

I am trying to use isotope filtering (cool animations) with bootstrap tabs where each tab-pane has its own custom post-type query loop. For some reason, I have to click twice on the tabs to have the fitRows layout work. I use get_post_type() to get the post type for the data-category attribute in the content-archive.php file.

I have tried and/or implemented the list below.

1. wrapped with on load function
2. set max width and height for images
3. imagesLoaded and layout (formerly isotope reLayout)
4. hidden/show style options from isotope (remove transforms I believe but took it off as nothing changed and was using it to fix the overlapping issue but it is no more when using tab-pane as the container)
5. using the same active class as bootstrap tabs

Here is the link to the site - https://bit.ly/3ryiifU

Here is my code:

jQuery(window).on('load', function() {
// init Isotope
let $fit_container = jQuery('.tab-pane').isotope({
  itemSelector: '.scroll-post',
  layoutMode: 'fitRows'
});

$fit_container.imagesLoaded().progress(function() {   
    $fit_container.isotope('layout');
});

// bind filter button click
jQuery('.nav-tabs li').on( 'click', 'a', function() {
  var filterValue = jQuery( this ).attr('data-filter');
  $fit_container.isotope({ filter: filterValue });
});

// change active class on buttons
    jQuery('.nav').each( function( i, navTabs ) {
      var $navTabs = $( navTabs );
      $navTabs.on( 'click', 'a', function() {
        $navTabs.find('.active').removeClass('active');
        jQuery( this ).addClass('active');
      });
    }); 
});

HTML/PHP

main id=content class=site-content
article class=container
         section class=row
 div id=primary class=content-area col-sm-12 col-lg-9
     

         header class=page-header
             h1 class=page-title?php printf( esc_html__( 'Category: %s', 'wp-bootstrap-starter' ), 'span' . single_cat_title( '', false ) . '/span' ); ?/h1
         /header!-- .page-header --

?php
$cat = get_queried_object();
$slug = $cat-slug;
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

$all_loop = new WP_Query( array( 
'category_name' = $slug, 
'post_type' = array('font','snipp','post'),
'posts_per_page' = 6,
'paged' = $paged
) ); 

$font_loop = new WP_Query( array( 
'category_name' = $slug,
'post_type' = 'font',
'posts_per_page' = 6,
'paged' = $paged
) ); 

$snipp_loop = new WP_Query( array( 
'category_name' = $slug,
'post_type' = 'snipp',
'posts_per_page' = 6,
'paged' = $paged
) ); 

$post_loop = new WP_Query( array( 
'category_name' = $slug,
'post_type' = 'post',
'posts_per_page' = 6,
'paged' = $paged
) ); 
?
ul class=nav nav-tabs id=myTab role=tablist
  li role=presentation class=nav-item
  a class=nav-link active show is-checked data-filter=* data-bs-toggle=tab data-bs-target=#all  type=button role=tab aria-controls=all aria-selected=trueAll/a/li

?php if($font_loop-have_posts()): ?
 li role=presentation class=nav-item
 a class=nav-link data-filter=.font data-bs-toggle=tab data-bs-target=#font type=button role=tab aria-controls=font aria-selected=falseFonts/a/li
 ?php endif; ?
?php if($snipp_loop-have_posts()): ?
 li role=presentation class=nav-itema class=nav-link  data-filter=.snipp data-bs-toggle=tab data-bs-target=#snipp type=button role=tab aria-controls=snipp aria-selected=falseSnippets/a/li
 ?php endif; ?
?php if($post_loop-have_posts()): ?
 li role=presentation class=nav-itema class=nav-link data-filter=.post data-bs-toggle=tab data-bs-target=#post type=button role=tab aria-controls=post aria-selected=falseBlog/a/li
 ?php endif; ?
/ul
div class=tab-content id=myTabContent
   div role=tabpanel class=tab-pane fade active show id=all aria-labelledby=all-tab
?php
if ( $all_loop-have_posts() ) :
while ( $all_loop-have_posts() ) : $all_loop-the_post(); 


             get_template_part( 'template-parts/content', 'archive' );

         endwhile;

         the_posts_navigation();

     else :

         get_template_part( 'template-parts/content', 'archive' );

     endif; ?   
 /div!-- #tabpanel-all-content --
 div role=tabpanel class=tab-pane fade id=font aria-labelledby=font-tab
 ?php
if ( $font_loop-have_posts() ) :
while ( $font_loop-have_posts() ) : $font_loop-the_post(); 
?
?php

             get_template_part( 'template-parts/content', 'archive' );

         endwhile;

         the_posts_navigation();

     else :

         get_template_part( 'template-parts/content', 'none' );

     endif; ?
 /div!-- tabpanel-font-content --
 div role=tabpanel class=tab-pane fade id=snipp aria-labelledby=snipp-tab
  ?php 
if ( $snipp_loop-have_posts() ) : 
while ( $snipp_loop-have_posts() ) : $snipp_loop-the_post(); 
?
?php

             get_template_part( 'template-parts/content', 'archive' );

         endwhile;

         the_posts_navigation();

     else :

         get_template_part( 'template-parts/content', 'none' );

     endif; ?
 /div!-- #tabpanel-snipp-content --
 div role=tabpanel class=tab-pane fade id=post aria-labelledby=post-tab
 ?php 
if ( $post_loop-have_posts() ) : 
while ( $post_loop-have_posts() ) : $post_loop-the_post(); 
?
?php

             get_template_part( 'template-parts/content', 'archive' );

         endwhile;

         the_posts_navigation();

     else :

         get_template_part( 'template-parts/content', 'none' );

     endif; ?
 /div!-- #tabpanel-post-content --
 /div!-- #tab-content --
 /div!-- #primary --

?php get_sidebar(); ?


/section!-- #row --
/article!-- #container --
/main!-- #content --```