without it there is a brief moment of "First create a shopping list"
message that is confusing
font-size: 14pt;
color: #333;
}
font-size: 14pt;
color: #333;
}
+#splash {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: hsl(0, 0%, 30%);
+ color: white;
+ display: grid;
+ transition: 0.2s;
+}
+#splash.done {
+ opacity: 0;
+ color: black;
+}
+#splash > p {
+ margin: auto;
+ width: max-content;
+ font-size: 200%;
+}
"use strict";
(function(){
var uri_base, environment, devel_env; // filled on page load from an HTML attribute
"use strict";
(function(){
var uri_base, environment, devel_env; // filled on page load from an HTML attribute
+var start_time = Date.now();
+
var ui_icon_class_re = new RegExp('\\bui-icon-\\S+\\b');
var uri_id_re = new RegExp('/(\\d+)$');
var lists_version = -1;
var ui_icon_class_re = new RegExp('\\bui-icon-\\S+\\b');
var uri_id_re = new RegExp('/(\\d+)$');
var lists_version = -1;
}
function load_lists() {
$.get(uri_base + '/api/v1/list')
}
function load_lists() {
$.get(uri_base + '/api/v1/list')
+ .always(()=>{
+ var splash = $('#splash');
+ if (splash.length) {
+ var dur = splash.css('transition-duration');
+ if (dur && dur.endsWith('s')) {
+ dur = 1000 * parseFloat(dur.substring(0, dur.length-1));
+ }
+ else
+ dur = 1000;
+
+ var now = Date.now();
+ window.setTimeout(() => {
+ splash.addClass('done');
+ debug('scheduling splash removal in '+dur+'ms');
+ window.setTimeout(()=>{ splash.remove(); }, dur);
+ },
+ Math.max(0, 500 - (now - start_time))
+ );
+ }
+ })
.done(data => {
lists_version = data.lists_version;
.done(data => {
lists_version = data.lists_version;
+<div id="splash">
+ <p>Loading…</p>
+</div>
<div id="page" class="loading-lists" lsl-uri-base="<% request.uri_base %>" lsl-environment="<% settings.environment %>" >
<div id="sidebar">
<ul id="sidebar-items">
<div id="page" class="loading-lists" lsl-uri-base="<% request.uri_base %>" lsl-environment="<% settings.environment %>" >
<div id="sidebar">
<ul id="sidebar-items">