Doesn't see the CSS on first enter in my codes-CodePudding

I am using Laravel php. Head and Footer tags are in my app.blade file.But it doesn't run the preloader in the head tag when it's first opened. It also doesn't load the css file. It comes after 1-2 seconds exactly. It's too fast to take a screenshot, so I uploaded it as a video. I will add the lines of code below along with the video.

https://youtu.be/ihHmQBsSpNs

app.blade.php header codes:

@if(!isset($lang)) @php($lang = 'tr') @endif
@php($slug = Request::segment(1))
<!DOCTYPE html>
<html lang="tr">
<head>  
<title>NovaPia Clinic</title>
<meta charset="UTF-8">
<meta name="description" content="NovaPia Clinic">
<meta name="keywords" content="Dentist, Clinic">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
 
    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ asset('theme/css/style.css')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/css/responsive.css')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/css/animate.css')}}"/>
    

    <link rel="shortcut icon" href="{{ asset('theme/img/favico.png')}}">    


    <link rel="stylesheet" href="{{ asset('theme/icon-fonts/fontawesome-5.0.6/css/fontawesome-all.min.css')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.css')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.svg')}}"/>
    <link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.ttf')}}"/>
    <script src="https://kit.fontawesome.com/40e15e0d0d.js" crossorigin="anonymous"></script>


    <link rel="stylesheet" href="{{ asset('theme/font/stylesheet.css')}}"/>
   

</head> 
<body> 


<div id="preloader">
  <div >
    <div  style=""><img src="{{ asset('theme/img/nova.png')}}" alt=""></div>
    <span>yükleniyor...</span>
  </div>
  <div ></div>
  <div ></div>
</div>

<div >
    <div ></div>
  </div>
<main>


  
  <header >
 
    <a href="index.html"  data-type="ajax-load">
      <img src="{{ asset('img/nova.svg')}}" alt="">
    </a>

    <div >
      <span></span>
      <span></span>
      <span></span>
      </div>
  </header>```

CodePudding user response：

You must add display:none in the body, and add a setTimeout to change the display value to block after 5 seconds for example, like that :

<body style="display:none" id="body_id">

<script>setTimeout(() => { document.getElementById('body_id').style.display = 'block'; }, "5000");</script>