Динамические вкладки исчезают Нет недавних результатов

Question

Я работаю над этим уже довольно давно, пока пользователь нажимает на вкладку, сначала отображается gif загрузки, и если на этой вкладке нет совпадений или данных, будет возвращено «Матчи не найдены».Вот мой код:

//this is divs:
       <div id="preload">
           <center><img src="{{ asset('/images/loading.gif')}}"></center>
        </div>
        <div id="norecent">
        @foreach(\App\Match::mainMatches()->where('leagues.type','=','csgo')->where('matches.status',['open','ongoing'])->get() as $match))
           <center><span>No Matches Available.</span></center>
        @endforeach
        </div>

//this is the part where the gif appears on the loading of the page
<script>
$(function(){
    $("#preload").fadeOut(800, function(){
        $(".box").fadeIn(700);
    });
});
</script>
 <script type="text/javascript">
  $(document).ready(function(){
  // Hide displayed paragraphs

$(document).ajaxStart(function(){
    $("#preload").css("display","block");
});
$(document).ajaxComplete(function(){
    $("#preload").css("display","none");
});
//all match tab
$(".all-match-button").click(function(){

    $(".box").load('{{ url('allmatch') }}');
    $(".btnall").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".matchmain").hide();
});


//dota 2 tab
$(".dota-match-button").click(function(){
    $(".box").load('{{ url('dota2') }}');
    $(".btndota").attr('style','display: block !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

//csgo tab
$(".csgo-match-button").click(function(){

    $(".box").load('{{ url('csgo') }}');
    $(".btncsgo").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

//sports tab
$(".sports-match-button").click(function(){
   $(".box").load('{{ url('sports') }}');
    $(".btnsports").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

});
</script>

, поэтому, по сути, div "norecent" является просто примером для вкладки csgo для отображения "нет совпадений", если контейнер пуст.есть идеи как это сделать?TYIA!