Обработка задержки загрузки в AJAX в PHP

В реальных условиях при AJAX запросах происходят задержки, связанные с ожиданием ответа сайта. На локальном компьютере эта задержка не заметна, так как ответ приходит очень быстро.

Давайте сымитируем задержку. В этом нам поможет PHP функция sleep. Например, установим задержку на 5 секунд:

ajax.php<?php
  sleep(5);
  
  echo 'text';
?>

Давайте сделаем AJAX запрос к такой странице:

javascriptbutton.addEventListener('click', async function() {
  let response = await fetch('ajax.php');
  let text = await response.text();
  
  result.innerHTML = text;
});

А теперь сделаем так, чтобы пока идет запрос, в теге вывелось сообщение об этом:

javascriptbutton.addEventListener('click', async function() {
  result.innerHTML = 'loading...';
  
  let response = await fetch('ajax.php');
  let text = await response.text();
  
  result.innerHTML = text;
});