JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<main id="$main">
  <aside id="$aside">
  </aside>
  <article id="$article">
  </article>
</main>

CSS

aside { background: #ddd; }

JavaScript

const queue = []

function queueAdd(promise, label = 'Unknown') {
	const queueObject = {label, promise}
	queue.push(queueObject)
  promise.then((result) => queueDelete(queueObject, result))
  updateQueueUI()
}

function queueDelete(queueObject, result) {
	printResult(result)
	const index = queue.findIndex(x => x === queueObject)
	delete queue[index]
  updateQueueUI()
}

function updateQueueUI() {
	$aside.innerHTML = '<ul>' + queue.map(({label}) =>
  	`<li>${label}</li>` 
  ).join('') + '</ul>'
}

function printResult(result) {
	$article.innerHTML += `<p>${result}</p>`
}

function sleep(duration, returnValue = 'slept') {
	return new Promise((resolve, reject) => {
  	setTimeout(() => {
    	resolve(returnValue)
    }, duration)
  })
}

queueAdd(sleep(1000))
queueAdd(sleep(3000, 'three'), 'Waiting for a three-second-promise')
queueAdd(sleep(7000, 'seven'))