Animated Gif does not animate in Safari durning page preload

I have a rails app with a button that triggers a fill page gif to show while some long background task is happening. Everything works as expected in chrome but Safari never loads the animated gif.

Sometimes Safari will show a freeze frame of the gif but not always. the code is pretty simple

HTML/ rails in top of the body

<div id="shippingLoader" style="display: none;">
  <div class="mt-5 text-center text-light">
    <h3 class="text-blue">We're searching for the best shipping rates for you!</h3>
    <%= image_tag("animations/shipping_box.gif") %>
  </div>
</div>

the button that triggers the loader

<%= link_to 'Select Shipping Method', cart_select_shipping_path(@cart),
      class: "btn btn-success btn-block", data: {disable_with: "Loading..."},
      id: "cust_shipping_btn", onClick: "javascript:showShippingLoader();" %>

The Javascript

function hideAllLoaders() {
  $('#shippingLoader').hide();
}

function showShippingLoader() {
  $('#distributorShippingModal').modal('hide');
  $('#shippingLoader').show();
}

// Hide Loader on any page load
$(window).bind("pageshow", function(event) {
  hideAllLoaders();
});

// Always timeout after 20 sec
setTimeout(hideAllLoaders, 20 * 1000);

It seems the gif only doesn't load durning the redirect (when I want it to load) If I place that same image tag with the gif on the page outside all of the above it animates in Safari as expected.