Fix Flash of Loader (FOL)

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;

src/app.jsx

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

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' : ''
       }`}