hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

delay splash screen, only show if loading takes too long

Browse source
This commit is contained in:
Henry Jameson 2025-08-14 16:45:24 +03:00
commit 97adff267f
4 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<noscript>To use Pleroma, please enable JavaScript.</noscript> <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 --> <!-- we are hiding entire graphic so no point showing credit -->
<div aria-hidden="true" id="splash-credit"> <div aria-hidden="true" id="splash-credit">
Art by pipivovott Art by pipivovott

7
public/static/splash.css
View file

@ -21,6 +21,13 @@ body {
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
font-size: calc(1vw + 1vh + 1vmin); font-size: calc(1vw + 1vh + 1vmin);
opacity: 1;
transition: opacity 500ms ease-out 0.5s;
}
#splash.hidden,
#splash.initial-hidden {
opacity: 0;
} }
#splash-credit { #splash-credit {

7
src/App.scss
View file

@ -929,12 +929,7 @@ option {
#splash { #splash {
pointer-events: none; pointer-events: none;
transition: opacity 0.5s; // transition: opacity 0.5s;
opacity: 1;
&.hidden {
opacity: 0;
}
#status { #status {
&.css-ok { &.css-ok {

1
src/main.js
View file

@ -80,6 +80,7 @@ const persistedStateOptions = {
console.error('Storage error', e) console.error('Storage error', e)
storageError = e storageError = e
} }
document.querySelector('#splash').classList.remove('initial-hidden')
document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}_small.webp` document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}_small.webp`
document.querySelector('#status').removeAttribute('class') document.querySelector('#status').removeAttribute('class')
document.querySelector('#status').textContent = i18n.global.t('splash.loading') document.querySelector('#status').textContent = i18n.global.t('splash.loading')