Other tab content is on screen while loading, but should be is-active tab content

Question

I am trying to show users full page loader while page is loading, however I am struggling with it. I do not want users to see other tab content while loading. For some reason it shows first tab content while loading and after the page-loader is hidden.(I am using Material Design Lite library for tabs).

I created loader like this:

<!-- Page loader -->
<div class="page-cover">
    <div id="overlayLoading" class="preloader-wrapper big active">
        <div class="spinner-layer spinner-blue-teal lighten-1-only">
            <div class="circle-clipper left">
                <div class="circle"></div>
            </div>
            <div class="gap-patch">
                <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
                <div class="circle"></div>
            </div>
        </div>
    </div>
</div>
<!-- Page Loader End -->

and it uses this css to make it full page:

.page-cover{
    background: #212121;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 800;
}

And using JQUERY I am hiding it:

$(document).ready(function() {
    $('.page-cover').fadeOut();
});

It is working, showing loader and hiding it after page is loaded but I see first tab content for a second.