Boostrap Ajax Tabs with a twist

I am struggeling to get the following result. A user browses through the tabs but he doesn't see the loading effect when reentering the same page (well this is because the default value is overrided by the loader) - but how can I override the .load() DOM with loader on a non active tab [ simplification :: clear the content when leaving the tab] .

My basic attempt. The first tab doesn't work when reentering from ajax pages, but that it's not the case it runs normally on my page.

TLDR - Replace content to original content(loader) after leaving the active tab

Simple JQuery

$('#myTabs a').click(function(e) {
  e.preventDefault();
  $.ajaxSetup({
    'cache': true
  });
  var url = $(this).attr("data-url");
  var href = this.hash;
  var pane = $(this);
  $(href).load(url, function(result) {
    pane.tab('show');

  });
});

And a example

https://jsfiddle.net/074rk3re/4/