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