oreolek/phanpy
1
0
Fork 0
Code Activity

Fix Flash of Loader (FOL)

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-19 19:21:51 +08:00
parent d2e417eaa4
commit 1559052361
3 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app.css
View file

@ -1805,12 +1805,12 @@ meter.donut[hidden] {
width: 100%;
flex-grow: 1;
}
:is(#home-page, #welcome, #columns) ~ .deck-container {
:is(#home-page, #welcome, #columns, #loader-root) ~ .deck-container {
z-index: 10;
position: fixed;
inset: 0;
}
:is(#home-page, #welcome, #columns):has(~ .deck-container) {
:is(#home-page, #welcome, #columns, #loader-root):has(~ .deck-container) {
display: block;
position: absolute;
user-select: none;

2
src/app.jsx
View file

@ -241,7 +241,7 @@ function App() {
isLoggedIn ? (
<Home />
) : uiState === 'loading' ? (
<Loader />
<Loader id="loader-root" />
) : (
<Welcome />
)

3
src/components/loader.jsx
View file

@ -1,8 +1,9 @@
import './loader.css';
function Loader({ abrupt, hidden }) {
function Loader({ abrupt, hidden, ...props }) {
return (
<div
{...props}
class={`loader-container ${abrupt ? 'abrupt' : ''} ${
hidden ? 'hidden' : ''
}`}