Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
105 lines (95 sloc) 3.25 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'none';
img-src 'self' data: https://www.google-analytics.com;
script-src 'self' 'unsafe-inline' https://www.google-analytics.com;
style-src 'self' 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com;
object-src 'none';
font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com"
manifest-src 'self'
>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
{% block head %}
<title>little shell</title>
{% endblock %}
</head>
<body>
<div class="lw-shell">
<style>
:root {
background-color: #eeeeee;
}
.lw-shell {
margin: 50px;
color: #222222;
}
.lw-content-root {
display: none;
}
</style>
<h1 id="lw-loading"></h1>
</div>
<script id="lw-shell">
(function(){
const startTime = Date.now();
let intervalId = null;
let count = 0;
let clearPromise = null;
/**
* Shell to help with asynchronously loading pages.
* Shows `Loading ...` animation after half a second.
* Throttles page load by minimum of 250ms.
* TODO: transition animation, service worker setup
*/
window.littleShell = {
/**
* Clear the shell
*
* @return promise that resolves when the shell clears
*/
clear: function() {
if (intervalId) {
const now = Date.now();
clearInterval(intervalId);
intervalId = null;
clearPromise = new Promise(
function(resolve) {
setTimeout(
function() {
let shell = document.body.querySelector('div.lw-shell');
if (shell) {
document.body.removeChild(shell);
}
resolve('ok');
}, Math.max(250-(now-startTime), 20)
);
}
)
}
return clearPromise;
}
};
intervalId = setInterval(function() {
const str = 'Loading ....................';
count = (count + 1) % 15;
let heading = document.body.querySelector('#lw-loading');
if (heading) {
heading.textContent = str.substring(0, 10+count);
} else {
littleShell.clear();
}
}, 500);
})();
</script>
<script src="{{ jsroot }}/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<div class="lw-content-root">
{% block content %}
Content here, frickjack!
{% endblock %}
</div>
</body>
</html>