Other tab content is on screen while loading, but should be is-active tab content
<p>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 <code>page-loader</code> is hidden.(I am using Material Design Lite library for tabs).</p>

<p>I created loader like this:</p>

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

<p>and it uses this css to make it full page:</p>

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

<p>And using JQUERY I am hiding it:</p>

<pre><code>$(document).ready(function() {
    $('.page-cover').fadeOut();
});
</code></pre>

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