Как добавить анимацию загрузки при получении данных из API?Ваниль JS

Question

Я перепробовал много ответов здесь, но все ответы, которые я нашел, люди используют jquery, ajax, реагируют или тому подобное.Я хотел бы получить ответ с чистым javascript (vanilla js).

const movieApiMovies = () => {
fetch(movieApi_url + "movies/")
    .then(response => response.json())
    .then(function (data) {
        let result = `<h2> Movies I've watched! </h2>`;
        data.forEach((movie) => {
            const {id, name, year, note_imdb, genre, duration} = movie;
            result +=
                `<div>
                    <h5> Movie ID: ${id} </h5>
                    <ul>
                        <li>Movie name: ${name}</li>
                        <li>Movie year: ${year}</li>
                        <li>Movie note on IMDB: ${note_imdb}</li>
                        <li>Movie Genre: ${genre}</li>
                        <li>Movie duration: ${duration}</li>
                    </ul>
                </div>`;
            document.getElementById('movieResult').innerHTML = result;
        })
    })
};

У меня есть анимация, она находится на этом элементе Div.

<div class="boxLoading"></div>

И у меня есть кнопка, которая собираетсяназывать все.

<div id="button1">
      <button class="button" id="moviesfromapi"onclick="movieApiMovies ()">Display</button>
</div>

Answer 1

добавить загрузчик перед вызовом и удалить, как только вы получите результаты, следующим образом

const movieApiMovies = () => {
let loader = `<div class="boxLoading"></div>`;
document.getElementById('movieResult').innerHTML = loader;
fetch(movieApi_url + "movies/")
    .then(response => response.json())
    .then(function (data) {
        let result = `<h2> Movies I've watched! </h2>`;
        data.forEach((movie) => {
            const {id, name, year, note_imdb, genre, duration} = movie;
            result +=
                `<div>
                    <h5> Movie ID: ${id} </h5>
                    <ul>
                        <li>Movie name: ${name}</li>
                        <li>Movie year: ${year}</li>
                        <li>Movie note on IMDB: ${note_imdb}</li>
                        <li>Movie Genre: ${genre}</li>
                        <li>Movie duration: ${duration}</li>
                    </ul>
                </div>`;
            document.getElementById('movieResult').innerHTML = result;
        })
    })
};