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%; width: 100%;
flex-grow: 1; flex-grow: 1;
} }
:is(#home-page, #welcome, #columns) ~ .deck-container { :is(#home-page, #welcome, #columns, #loader-root) ~ .deck-container {
z-index: 10; z-index: 10;
position: fixed; position: fixed;
inset: 0; inset: 0;
} }
:is(#home-page, #welcome, #columns):has(~ .deck-container) { :is(#home-page, #welcome, #columns, #loader-root):has(~ .deck-container) {
display: block; display: block;
position: absolute; position: absolute;
user-select: none; user-select: none;

2
src/app.jsx
View file

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

3
src/components/loader.jsx
View file

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