Maybefill for a
<loading> tag which allows for client reordering of async html.
The idea here is to have a standard implementation to support out of order flushing (or progressive rendering) of html.
npm install loading-tag
To enable the
<loading> tag on your website you need to first include a
<script> in the
<head> of your document.
You can follow the examples below or include the script from a cdn like so:
<template> tag is flushed it's contents will be inserted before a related
<loading> tag will also have a
loaded attribute set with a default style of
Ideally in an official implementation this would be the
:loaded psuedo selector in CSS.
const fs = ;const http = ;// Load the prebuilt script.const script = fs;http;// Final Output.`<!DOCTYPE html><html><head>...</head><body><div>My App<div>Resulting content.</div><loading for="a"><div>Pending</div></loading></div><div>Other stuff</div></body></html>`
Occasionally you have many async chunks that you would like to flush as they become available.
Technically you could achieve this effect by nesting
<loading> tags however having a native way to do this can be beneficial.
In this script if you flush a template with a chunk attribute (
<template id="a" chunk>) it will append the template contents as you would expect but not trigger the
loaded attribute to be applied to the related
<loading> element. You can flush as many
<template> tags with the same
id assuming they have a
chunk attribute and they will all be appended in the order they were flushed. On the final chunk you can signal the completion of the template by sending a final template with the same
id but no
// Start sending html.res;// Send a loading element to prepend html before.res;// Continue writing synchronous html.res// Write template chunks at any point.res;res;res;// Signal completion.res;// Close document and finish response.res// Final Output.`<!DOCTYPE html><html><head>...</head><body>1234<loading for="a">Pending</loading><div>Something else</div></body></html>`
npm testto build and run tests.
Please feel free to create a PR!