devsnek/suspense.mjs

## suspense.mjs
import { setTimeout } from 'timers/promises';
import http from 'http';

async function expensiveFunction() {
  await setTimeout(1000);
  return 'Here is the important data!';
}

http.createServer((req, res) => {
  if (req.url !== '/') {
    res.writeHead(404);
    res.end();
    return;
  }

  res.writeHead(200, {
    'Content-Type': 'text/html; charset=utf-8',
  });

  res.write(`\
<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <h1>Very Cool Demo</h1>
    <div id="suspense">Loading Data...</div>
  </body>
</html>
`);

  expensiveFunction()
    .then((result) => {
      res.end(`\
<div hidden id="lazy">
  ${result}
</div>
<script>
  lazy.removeAttribute('hidden');
  suspense.replaceChildren(lazy);
</script>
`);
    });
}).listen(8080);
	import { setTimeout } from 'timers/promises';
	import http from 'http';

	async function expensiveFunction() {
	await setTimeout(1000);
	return 'Here is the important data!';
	}

	http.createServer((req, res) => {
	if (req.url !== '/') {
	res.writeHead(404);
	res.end();
	return;
	}

	res.writeHead(200, {
	'Content-Type': 'text/html; charset=utf-8',
	});

	res.write(`\
	<!DOCTYPE html>
	<html>
	<head>
	<title>Demo</title>
	</head>
	<body>
	<h1>Very Cool Demo</h1>
	<div id="suspense">Loading Data...</div>
	</body>
	</html>
	`);

	expensiveFunction()
	.then((result) => {
	res.end(`\
	<div hidden id="lazy">
	${result}
	</div>
	<script>
	lazy.removeAttribute('hidden');
	suspense.replaceChildren(lazy);
	</script>
	`);
	});
	}).listen(8080);