tildeverse
/
cryptpad
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a placeholder before loading screens for slow connection

This commit is contained in:
Maxime Cesson 2022-07-11 10:21:00 +02:00
parent bc29c26b66
commit 4b7e1b0757
6 changed files with 121 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/index.html
View File

@ -6,7 +6,9 @@
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/png" href="/customize/favicon/main-favicon.png" id="favicon"/>
<script src="/customize/pre-loading.js"></script>
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body class="html">
<noscript>

23
customize.dist/pre-loading.js Normal file
View File

@ -0,0 +1,23 @@
var logoPath = (/^\/(|index\.html)$/g.test(location.pathname)) ? '/customize/CryptPad_logo_grey.svg': '/customize/CryptPad_logo.svg';
var logoPath2 = '/customize/CryptPad_logo.svg';
if (location.pathname == '/' || location.pathname == '/index.html') {
logoPath2 = '/customize/CryptPad_logo_grey.svg';
}
// XXX rewrite 'CryptPad_logo_grey' by 'CryptPad_logo_hero'
// Choose between logoPath & logoPath2 OR do a separate "pre-loading" script for main page (customize/index.html)
var elem = document.createElement('div');
elem.setAttribute('id', 'placeholder');
elem.innerHTML = [
'<div class="placeholder-logo-container">',
'<img class="placeholder-logo" src="' + logoPath + '">',
'</div>',
'<div class="placeholder-message-container">',
'<p>Loading...</p>',
'</div>'
].join('');
document.addEventListener('DOMContentLoaded', function(e) {
document.body.appendChild(elem);
});

85
customize.dist/src/outer.css
View File

@ -18,3 +18,88 @@ iframe-placeholder, #sbox-iframe, #sbox-secure-iframe {
padding:0;
overflow:hidden;
}
@font-face {
font-family: 'Open Sans';
src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot');
src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.woff') format('woff'),
url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.ttf') format('truetype'),
url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#placeholder {
visibility: visible;
position: fixed;
z-index: -1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #EEEEEE; /* Hardcoded, really? @cp_loading-bg before */
color: #424242; /* @cp_loading-fg before (colortheme.less) */
font-size: 1.3em;
line-height: 120%;
opacity: 1;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important;
}
#placeholder .placeholder-logo-container {
height: 300px;
width: 300px;
margin-top: 50px;
flex: 0 1 auto;
min-height: 0;
text-align: center;
}
#placeholder .placeholder-logo-container img {
max-width: 100%;
max-height: 100%;
}
#placeholder .placeholder-message-container {
width: 700px;
max-width: 90vw;
height: 236px;
max-height: calc(100vh - 20px);
margin: 50px;
flex-shrink: 0;
display: flex;
flex-flow: column;
align-items: center;
}
#placeholder .placeholder-logo {
margin-left: auto;
margin-right: auto;
max-width: 90vw;
max-height: 300px;
width: auto;
height: auto;
margin-bottom: 2em;
}
@media screen and (max-width: 500px) {
#placeholder {
font-size: 16px !important;
}
#placeholder .placeholder-message-container {
height: 206px;
}
}
@media screen and (max-height: 700px) {
#placeholder {
font-size: 16px !important;
}
#placeholder .placeholder-message-container {
height: 206px;
}
}
@media screen and (max-height: 500px) {
#placeholder .placeholder-logo-container {
display: none;
}
}

3
customize.dist/template.js
View File

@ -47,6 +47,9 @@ $(function () {
], function () {
var $main = $(infoPage());
// Clean placeholder
document.querySelector('#placeholder').remove();
$body.append($main);
if (/^\/register\//.test(pathname)) {

7
www/common/sframe-common-outer.js
View File

@ -228,6 +228,12 @@ define([
// Answer with the requested data
postMsg(JSON.stringify({ txid: data.txid, cache: cache, localStore: localStore, language: Cryptpad.getLanguage() }));
// Remove the placeholder once iframe overwrites it for sure
setTimeout(function() {
document.querySelector('#placeholder').remove();
console.log('Pre-loading placeholder removed');
}, (5 * 1000));
// Then start the channel
window.addEventListener('message', function (msg) {
if (msg.source !== iframe) { return; }
@ -2190,4 +2196,3 @@ define([
return common;
});

4
www/pad/index.html
View File

@ -5,9 +5,9 @@
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script src="/customize/pre-loading.js"></script>
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe-placeholder>