delay splash screen, only show if loading takes too long
This commit is contained in:
parent
5bb0424397
commit
97adff267f
4 changed files with 10 additions and 7 deletions
|
|
@ -16,7 +16,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<noscript>To use Pleroma, please enable JavaScript.</noscript>
|
||||
<div id="splash">
|
||||
<div id="splash" class="initial-hidden">
|
||||
<!-- we are hiding entire graphic so no point showing credit -->
|
||||
<div aria-hidden="true" id="splash-credit">
|
||||
Art by pipivovott
|
||||
|
|
|
|||
|
|
@ -21,6 +21,13 @@ body {
|
|||
position: absolute;
|
||||
z-index: 9999;
|
||||
font-size: calc(1vw + 1vh + 1vmin);
|
||||
opacity: 1;
|
||||
transition: opacity 500ms ease-out 0.5s;
|
||||
}
|
||||
|
||||
#splash.hidden,
|
||||
#splash.initial-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#splash-credit {
|
||||
|
|
|
|||
|
|
@ -929,12 +929,7 @@ option {
|
|||
|
||||
#splash {
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s;
|
||||
opacity: 1;
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
// transition: opacity 0.5s;
|
||||
|
||||
#status {
|
||||
&.css-ok {
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ const persistedStateOptions = {
|
|||
console.error('Storage error', e)
|
||||
storageError = e
|
||||
}
|
||||
document.querySelector('#splash').classList.remove('initial-hidden')
|
||||
document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}_small.webp`
|
||||
document.querySelector('#status').removeAttribute('class')
|
||||
document.querySelector('#status').textContent = i18n.global.t('splash.loading')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue