loading-tag
Advanced tools
Maybefill for a `<loading>` tag which allows for client reordering of async html.
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.
Click here for some information regarding progressive rendering and it's implementation in Marko.
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:
<script src="https://unpkg.com/loading-tag/dist/index.min.js"></script>
After a <template> tag is flushed it's contents will be inserted before a related <loading> tag.
The <loading> tag will also have a loaded attribute set with a default style of display:none.
Ideally in an official implementation this would be the :loaded psuedo selector in CSS.
const fs = require('fs');
const http = require('http');
// Load the prebuilt script.
const script = fs.readFileSync(require.resolve('loading-tag'), 'utf-8');
http
.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "text/html" });
// Send out initial html (must include script in <head>).
res.write(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script>${script}</script>
</head>
<body>
<div>
My App
<loading for="a">
<div>Pending</div>
</loading>
</div>
<div>Other stuff</div>
`);
// Later you can flush more html using templates with matching id's
// The following will add the template contents before the `loading[for="a"]` tag.
setTimeout(() => {
res.write(`
<template id="a">
<div>Resulting content.</div>
</template>
`);
}, 500);
// Finally end the html response.
setTimeout(() => {
res.end(`
</body>
</html>
`);
}, 1000);
})
.listen();
// 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 chunk attribute.
// Start sending html.
res.write('<!DOCTYPE html>...');
// Send a loading element to prepend html before.
res.write('<loading for="a">Pending</loading>');
// Continue writing synchronous html.
res.write('<div>Something Else</div>')
// Write template chunks at any point.
res.write('<template id="a" chunk>1</template>');
res.write('<template id="a" chunk>2</template>');
res.write('<template id="a" chunk>3</template>');
// Signal completion.
res.write('<template id="a">4</template>');
// Close document and finish response.
res.write('</body></html>')
// Final Output.
`
<!DOCTYPE html>
<html>
<head>...</head>
<body>
1
2
3
4
<loading for="a">Pending</loading>
<div>Something else</div>
</body>
</html>
`
npm test to build and run tests.Please feel free to create a PR!
FAQs
Maybefill for a `<loading>` tag which allows for client reordering of async html.
We found that loading-tag demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.
Security News
OpenSSF has issued a high-severity advisory warning open source developers of an active Slack-based campaign using impersonation to deliver malware.