<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<script defer src="react.js"></script>
<script defer src="react-dom.js"></script>
<script defer src="react-component.js"></script>
</head>
<body>

{{!

By including the _flush tag, we explicitly flush the data rendered so
far, sending it to the client before continuing. This makes sure that
the client receives and can act upon links to external scripts and
stylesheets as soon as possible, improving total delivery time of the
web page.

}}

<p id="loading">Waiting for server side...</p>
{{_flush}}

{{pause}} {{! Inflate the delay, so it is readily observable }}
<div id="reactContainer">{{{react_contents}}}</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
	document.getElementById("loading").style = "text-decoration: line-through";

	const container = document.getElementById("reactContainer");

	setInterval(function () {
		ReactDOM.render(reactComponent(React), container);
	}, 1000);
});
</script>

</body>
</html>
