From 123067330cfb8030a9a6e36e1bcf1597419c49b0 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 21 Feb 2025 16:28:37 +0000
Subject: [PATCH] fix: loading indicator backdrop not working on chrome

---
 src/context/Loading.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/context/Loading.tsx b/src/context/Loading.tsx
index d94c2ef..39ccc11 100644
--- a/src/context/Loading.tsx
+++ b/src/context/Loading.tsx
@@ -18,8 +18,10 @@ export const LoadingProvider = ({ children }: Props) => {
 	return (
 		<LoadingContext.Provider value={{ loading, setLoading }}>
 			{loading && (
-				<div className="absolute w-full h-full z-[9999] backdrop-brightness-50 flex justify-center items-center gap-4">
-					<LoadingIndicator fill="white" className="w-16 h-16" />
+				<div className="absolute w-full h-full cursor-wait flex justify-center items-center">
+					{/* Keep loading indicator outside of div with backdrop-filter due to Chrome */}
+					<LoadingIndicator fill="white" className="w-16 h-16 z-[10000]" />
+					<div className="absolute w-full h-full z-[9999] backdrop-brightness-50 flex justify-center items-center gap-4"></div>
 				</div>
 			)}
 			{children}