dziku86/app.js

## app.js
function delay(time = 500) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

let spinner = document.querySelector('.spinner');
spinner.classList.add('active');

fetch('./books.json')
  .then((resp) => {
    if (!resp.ok) throw new Error('Could not get the data');
    return resp.json();
  })
  .then(async (books) => {
    let ul = document.getElementById('list');
    let arr = books.results;
    let d = 2000 / arr.length;
    // ul.innerHTML = arr
    //   .map((book) => {
    //     return `<li>${book.title}</li>`;
    //   })
    //   .join('');
    for await (let book of arr) {
      console.log(`Add <li> for ${book.title}`);
      ul.innerHTML += `<li>${book.title}</li>`;
      await delay(d);
    }
  })
  .catch((err) => {
    console.warn(err.message);
  })
  .finally(() => {
    spinner.classList.remove('active');
  });


## books.json
{
  "results": [
    { "id": 1, "title": "Lord of the Rings" },
    { "id": 2, "title": "The Hobbit" },
    { "id": 3, "title": "Good Omens" },
    { "id": 4, "title": "The Stand" },
    { "id": 5, "title": "The Sword of Shannara" },
    { "id": 16, "title": "Foundation and Empire" },
    { "id": 17, "title": "The Silmarillion" },
    { "id": 18, "title": "A Song of Ice and Fire" }
  ]
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./main.css" />
    <script src="./app.js" type="module"></script>
  </head>
  <body>
    <main>
      <ul id="list">
        <!-- books will be added here -->
      </ul>
    </main>
    <div class="spinner active">
      <p>Books <span>B</span> Loading</p>
    </div>
  </body>
</html>

## main.css
* {
  box-sizing: border-box;
}
html {
  color-scheme: dark light;
  font-size: 30px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}
body {
  min-height: 100vh;
}
.spinner {
  display: none;
  place-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: hsla(0, 0%, 0%, 0.8);
}
.spinner.active {
  display: grid;
}
.spinner p {
  font-size: 2rem;
  text-align: center;
  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
.spinner span {
  display: inline-block;
  transform: rotate(9deg);
}
@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
    color: gold;
  }
  50% {
    opacity: 0.2;
    transform: scale(3);
    color: rgb(128, 255, 0);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
    color: gold;
  }
}
	function delay(time = 500) {
	return new Promise((resolve, reject) => {
	setTimeout(resolve, time);
	});
	}

	let spinner = document.querySelector('.spinner');
	spinner.classList.add('active');

	fetch('./books.json')
	.then((resp) => {
	if (!resp.ok) throw new Error('Could not get the data');
	return resp.json();
	})
	.then(async (books) => {
	let ul = document.getElementById('list');
	let arr = books.results;
	let d = 2000 / arr.length;
	// ul.innerHTML = arr
	// .map((book) => {
	// return `<li>${book.title}</li>`;
	// })
	// .join('');
	for await (let book of arr) {
	console.log(`Add <li> for ${book.title}`);
	ul.innerHTML += `<li>${book.title}</li>`;
	await delay(d);
	}
	})
	.catch((err) => {
	console.warn(err.message);
	})
	.finally(() => {
	spinner.classList.remove('active');
	});
	{
	"results": [
	{ "id": 1, "title": "Lord of the Rings" },
	{ "id": 2, "title": "The Hobbit" },
	{ "id": 3, "title": "Good Omens" },
	{ "id": 4, "title": "The Stand" },
	{ "id": 5, "title": "The Sword of Shannara" },
	{ "id": 16, "title": "Foundation and Empire" },
	{ "id": 17, "title": "The Silmarillion" },
	{ "id": 18, "title": "A Song of Ice and Fire" }
	]
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="./main.css" />
	<script src="./app.js" type="module"></script>
	</head>
	<body>
	<main>
	<ul id="list">
	<!-- books will be added here -->
	</ul>
	</main>
	<div class="spinner active">
	<p>Books <span>B</span> Loading</p>
	</div>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}
	html {
	color-scheme: dark light;
	font-size: 30px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
	'Helvetica Neue', sans-serif;
	}
	body {
	min-height: 100vh;
	}
	.spinner {
	display: none;
	place-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: hsla(0, 0%, 0%, 0.8);
	}
	.spinner.active {
	display: grid;
	}
	.spinner p {
	font-size: 2rem;
	text-align: center;
	animation-name: pulse;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	}
	.spinner span {
	display: inline-block;
	transform: rotate(9deg);
	}
	@keyframes pulse {
	0% {
	opacity: 1;
	transform: scale(1);
	color: gold;
	}
	50% {
	opacity: 0.2;
	transform: scale(3);
	color: rgb(128, 255, 0);
	}
	100% {
	opacity: 0.8;
	transform: scale(1);
	color: gold;
	}
	}