Как корректно сделать Preloader?

174

10 марта 2022, 05:20

У меня многостраничная галерея изображений. На Materialize взял прелоадер, все отображается, но как сделать так чтобы прелоадер крутился тем временем с loremPicsum приходили картинки, далее прелоадер исчезал и появлялась сама страница галереи? У меня же прелоадер крутится как и описано выше, но но на секунду или меньше, дальше появляются картинки и грузятся без прелоадера...

let spiner = document.querySelector('.preloader-wrapper');
async function readImage() {
    let page = localStorage.getItem('value');
    let bodyEl = document.querySelector(".row");
    bodyEl.innerHTML = '';
    bodyEl.style.display = 'none';
    try { 
        let img = await fetch(`https://picsum.photos/v2/list?page=${page}&limit=10`);
        let images = await img.json();
        for (let image of images) {
            let cardImg = `<img class="col xl3 l4 m6 s12 materialboxed" src="${image.download_url}">`;
            bodyEl.insertAdjacentHTML('beforeend', cardImg);
        }
        M.AutoInit();
    }
    catch {
        alert("So sorry, it's error...")
    }
    finally {
        spiner.style.display = 'none';
        bodyEl.style.display = 'block';
    }
}

HTML

<body class="brown lighten-4 lighten-3">
    <div class="container center-align">
        <h1 class="center-align"> Image gallery </h1>
        <div class="preloader-wrapper big active">
            <div class="spinner-layer spinner-blue">
            <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 class="spinner-layer spinner-red">
            <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 class="spinner-layer spinner-yellow">
            <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 class="spinner-layer spinner-green">
            <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 class="row card-panel hoverable grey lighten-2"></div>
    </div>
    <ul class="pagination container center-align">
        <li class="waves-effect arrowL"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        <li class="waves-effect"><a href="#!">1</a></li>
        <li class="waves-effect"><a href="#!">2</a></li>
        <li class="waves-effect"><a href="#!">3</a></li>
        <li class="waves-effect"><a href="#!">4</a></li>
        <li class="waves-effect"><a href="#!">5</a></li>
        <li class="waves-effect arrowR"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
    </ul>
    <br/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="./index.js"></script>
<body>