Как загрузить страницу только когда придет запрос с сервера?

Question

[maxemga]

У меня сайт и при обновлении страницы или заходе на него, на сервер идет GET запрос, сервер отправляет запрос в БД и данные показываются на сайте карточками, но Страницы подгрузилась и только через какое-то время появились эти карточки, ибо нужно подождать запрос. Вопрос, как сделать так чтобы страницы подгрузилась только когда запрос уже пришел, а пока как страница не загрузилась, показывать loader на середине экрана, как множестве сайтов?

Answer 1

[Алексей Ярков]

1. Переменная-флаг isLoaded = false
   
2. Если isLoaded === false - крутим прелоадер
   
3. Отправляем запрос
   
4. Запрос завершается
   
5. Переменная-флаг isLoaded = true
   
6. Если isLoaded === true - скрываем прелоадер и показываем контент
   

Comments

[maxemga]

Спасибо, но мой основной запрос, как сделать чтоб страница загрузилась после запроса? Ну когда данные уже придут

[Алексей Ярков]

maxemga,

Вопрос, как сделать так чтобы страницы подгрузилась только когда запрос уже пришел, а пока как страница не загрузилась, показывать loader на середине экрана, как множестве сайтов?

Это именно то что я описал. Как вы собрались лоадер показывать, если страница не загружена?

[Gennady94]

Нужны две переменные. isLoading, isLoaded.
isLoading = false
isLoaded = false
1. Отправляем запрос
2. isLoading = true
3. if(isLoading) показываем preloader
4. Запрос пришел
5. isLoading = false
6. Скрываем preloader
7. isLoaded = true
8. Показываем полученные данные

[maxemga]

Gennady94, смотри, я хочу чтобы было как на этом сайте https://preview.themeforest.net/item/gustablo-rest...
Тоесть ты заходишь и там Лоадер такой, и когда все прогрузится, все запросы придут, то только тогда открывается страница

[Gennady94]

maxemga, То есть тебе нужно подождать пока сервер вернёт ответ и только потом рендерить страницу? Я думал что ты спрашиваешь как отображать preloader.

[maxemga]

Gennady94, ну типо того, но спасибо за объяснение про Лоадер

[Gennady94]

fetch('твой url').then((response) => {
	if(response) { 
  	//инструкции
  }
  
}).catch((error) => {
	//инструкции
})

.then используется если api функция которая возвращает response у тебя асинхронная