From 15590523618f0638d9f2b5120c41f0bae92fd536 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 19 Aug 2023 19:21:51 +0800
Subject: [PATCH] Fix Flash of Loader (FOL)
---
src/app.css | 4 ++--
src/app.jsx | 2 +-
src/components/loader.jsx | 3 ++-
3 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/app.css b/src/app.css
index bf1834d0..8361df31 100644
--- a/src/app.css
+++ b/src/app.css
@@ -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;
diff --git a/src/app.jsx b/src/app.jsx
index c6b07843..0f491e94 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -241,7 +241,7 @@ function App() {
isLoggedIn ? (
<Home />
) : uiState === 'loading' ? (
- <Loader />
+ <Loader id="loader-root" />
) : (
<Welcome />
)
diff --git a/src/components/loader.jsx b/src/components/loader.jsx
index 9ef93583..815d6588 100644
--- a/src/components/loader.jsx
+++ b/src/components/loader.jsx
@@ -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' : ''
}`}