diff --git a/templates/library_switcher.templ b/templates/library_switcher.templ
index 5a6f1560..0ebdb912 100644
--- a/templates/library_switcher.templ
+++ b/templates/library_switcher.templ
@@ -43,8 +43,8 @@ templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, title stri
 		</div>
 		<div
 			id="loading-spinner"
-			class="hidden fixed inset-0 bg-opacity-50 flex items-center justify-center z-50"
-			style="background-color: var(--bg-primary);"
+			class="hidden fixed inset-0 flex items-center justify-center z-50"
+			style="background-color: color-mix(in srgb, var(--bg-primary) 55%, transparent);"
 		>
 			<div class="animate-spin rounded-full h-12 w-12 border-b-2" style="border-color: var(--accent);"></div>
 		</div>
diff --git a/templates/library_switcher_templ.go b/templates/library_switcher_templ.go
index 022f5cf2..0979e575 100644
--- a/templates/library_switcher_templ.go
+++ b/templates/library_switcher_templ.go
@@ -275,7 +275,7 @@ func LibrarySwitcher(libData []LibraryData, currentLibraryID string, title strin
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div><div id=\"loading-spinner\" class=\"hidden fixed inset-0 bg-opacity-50 flex items-center justify-center z-50\" style=\"background-color: var(--bg-primary);\"><div class=\"animate-spin rounded-full h-12 w-12 border-b-2\" style=\"border-color: var(--accent);\"></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div><div id=\"loading-spinner\" class=\"hidden fixed inset-0 flex items-center justify-center z-50\" style=\"background-color: color-mix(in srgb, var(--bg-primary) 55%, transparent);\"><div class=\"animate-spin rounded-full h-12 w-12 border-b-2\" style=\"border-color: var(--accent);\"></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/web/src/library-switcher.ts b/web/src/library-switcher.ts
index 2969b283..60e9270e 100644
--- a/web/src/library-switcher.ts
+++ b/web/src/library-switcher.ts
@@ -27,6 +27,11 @@ export async function switchWithTransition(
 
     await fetchFn();
 
+    // Lift the dim BEFORE the fade-in starts, so the new content's fade
+    // plays fully visible instead of being hard-cut by the overlay
+    // disappearing mid-transition.
+    loading.classList.add("hidden");
+
     container.classList.remove("duration-150");
     container.classList.add("duration-300");
     void container.offsetHeight;