diff --git a/package.json b/package.json
index bfe0bbaf..7f3d3073 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.11.41",
+  "version": "0.11.42",
   "type": "module",
   "scripts": {
     "start": "rm -rf build && NODE_ENV=development eleventy --serve",
diff --git a/src/css/style.css b/src/css/style.css
index c91bdbe5..541fc077 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -6168,7 +6168,7 @@ moderation-warning .toggle-content {
   display: none;
 }
 
-.splash-screen {
+.app-loading-state-content {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -6176,7 +6176,7 @@ moderation-warning .toggle-content {
   height: 100vh;
 }
 
-.splash-screen .loading-spinner {
+.app-loading-state-content .loading-spinner {
   width: 32px;
   height: 32px;
   border-width: 3px;
diff --git a/src/index.html b/src/index.html
index 7791e3d3..c353f77e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,8 +5,8 @@
   </head>
   <body>
     <div id="app-root">
-      <div id="splash-screen-container" class="splash-screen-container" hidden>
-        <div class="splash-screen">
+      <div id="app-loading-state" class="app-loading-state" hidden>
+        <div class="app-loading-state-content">
           <div class="loading-spinner"></div>
         </div>
       </div>
@@ -14,16 +14,37 @@
         <div>There was an error loading the app.</div>
         <button onclick="window.location.reload()">Try again</button>
       </div>
-      <script>
-        setTimeout(() => {
-          const errorState = document.getElementById("app-error-state");
-          if (errorState && !errorState.hidden) return;
-          const splash = document.getElementById("splash-screen-container");
-          if (splash) splash.hidden = false;
-        }, 2000);
-      </script>
     </div>
 
+    <script>
+      function showGlobalErrorState() {
+        const errorState = document.getElementById("app-error-state");
+        if (errorState) errorState.hidden = false;
+        const loadingState = document.getElementById("app-loading-state");
+        if (loadingState) loadingState.hidden = true;
+      }
+      function globalErrorStateIsShown() {
+        const errorState = document.getElementById("app-error-state");
+        return errorState && !errorState.hidden;
+      }
+      function showGlobalLoadingState() {
+        const errorState = document.getElementById("app-error-state");
+        if (errorState) errorState.hidden = true;
+        const loadingState = document.getElementById("app-loading-state");
+        if (loadingState) loadingState.hidden = false;
+      }
+      // Show loading state if the app hasn't loaded within 2 seconds, and show an error state if it hasn't loaded within 10 seconds.
+      // If the app loads successfully, the elements are replaced, so these timeouts won't do anything.
+      setTimeout(() => {
+        if (!globalErrorStateIsShown()) {
+          showGlobalLoadingState();
+        }
+      }, 2000);
+      setTimeout(() => {
+        showGlobalErrorState();
+      }, 10000);
+    </script>
+
     <script type="module">
       import { enableErrorLogs } from "/js/errorLogs.js";
       import "/js/perf.js";
@@ -130,8 +151,8 @@
           await dataLayer.initializePreferences();
         } catch (retryError) {
           console.error("Error initializing preferences", retryError);
-          document.getElementById("app-error-state").hidden = false;
-          document.getElementById("splash-screen-container").hidden = true;
+          window.showGlobalErrorState();
+          throw retryError;
         }
       }
 
