var spinner = document.querySelector('.spinner');
var content = document.querySelector('.content');
var refreshButton = document.querySelector('.refreshButton');

function networkRequest() {
  return new Promise((resolve, reject) => {
    const requestTime = 200; // request duration (for simulation) => 200ms

    setTimeout(resolve, requestTime, { payload: { 'foo': 'bar' } });
  });
}

function waitAtLeast(time, promise) {
  const timeoutPromise = new Promise((resolve) => {
    setTimeout(resolve, time);
  });
  return Promise.all([promise, timeoutPromise]).then((values) => values[0]);
};

function makeRequest() {
  spinner.classList.add('visible'); // show spinner

  let promise = networkRequest();
  promise = waitAtLeast(800, promise); // wait 800ms, evenif request takes less time (to avoid animation flickering)

  promise.then((data) => {
    content.textContent = `Updated data, payload: ${data.payload.foo + new Date()}`;
    spinner.classList.remove('active'); // hide spinner
  });
}

refreshButton.addEventListener('click', () => {
  makeRequest();
})