Страница загрузки в NextJS

Пока серверный компонент ждет ответ API, пользователь может видеть пустой экран. NextJS позволяет положить рядом с page.jsx файл loading.jsx - его разметку фреймворк покажет, пока страница не будет готова.

Давайте создадим простой экран загрузки в той же папке, что и страница пользователей:

export default function Loading() {
	return <p>loading users...</p>;
}

При обновлении страницы сначала появится текст из loading.jsx, затем список имен. В рабочем проекте строку с Promise убирают - задержку создает сам сетевой запрос. Чтобы задержка была заметна при проверке, в page.jsx перед fetch добавим искусственное ожидание:

export default async function Users() {
	await new Promise(resolve => setTimeout(resolve, 2000));
	
	let response = await fetch('https://jsonplaceholder.typicode.com/users');
	let users = await response.json();
	
	return (
		<ul>
			{users.map(user => (
				<li key={user.id}>{user.name}</li>
			))}
		</ul>
	);
}

Добавьте loading.jsx для раздела /news с текстом loading news... и проверьте его при медленном запросе к API.

Оформите экран загрузки для страницы одного города: короткий заголовок и поясняющая фраза на русском или английском.