fix: mark background content as hidden when loading

Author: brettkolodny

src/Preview.tsx

@@ -13,46 +13,51 @@ export const Preview: FC = () => {
 	const $isWasmLoaded = useStore((state) => state.isWasmLoaded);
 
 	return (
-		<ResizablePanel className="relative flex flex-col items-start gap-6 p-8">
-			{!$isWasmLoaded ? (<div className="absolute top-0 left-0 z-10 flex h-full w-full items-center justify-center backdrop-blur-sm">
-				<WasmLoading />
-			</div>) : null}
-			<div className="flex w-full items-center justify-between">
-				<p className="font-semibold text-3xl text-content-primary">
-					Parameters
-				</p>
-				<Button variant="destructive">Reset form</Button>
-			</div>
+		<ResizablePanel className="relative">
+			{!$isWasmLoaded ? (
+				<div className="absolute top-0 left-0 z-10 flex h-full w-full items-center justify-center backdrop-blur-sm">
+					<WasmLoading />
+				</div>
+			) : null}
 
-			<div className="flex h-full w-full items-center justify-center rounded-xl border p-4">
-				<div className="flex flex-col items-center justify-center gap-3">
-					<div className="flex items-center justify-center rounded-[6px] bg-highlight-sky p-2">
-						<ActivityIcon
-							className="text-content-invert"
-							width={24}
-							height={24}
-						/>
-					</div>
+			<div aria-hidden={!$isWasmLoaded} className="flex h-full w-full flex-col items-start gap-6 p-8">
+				<div className="flex w-full items-center justify-between">
+					<p className="font-semibold text-3xl text-content-primary">
+						Parameters
+					</p>
+					<Button variant="destructive">Reset form</Button>
+				</div>
+
+				<div className="flex h-full w-full items-center justify-center rounded-xl border p-4">
+					<div className="flex flex-col items-center justify-center gap-3">
+						<div className="flex items-center justify-center rounded-[6px] bg-highlight-sky p-2">
+							<ActivityIcon
+								className="text-content-invert"
+								width={24}
+								height={24}
+							/>
+						</div>
 
-					<div className="flex flex-col items-center gap-2">
-						<div className="flex max-w-[258px] flex-col items-center gap-1">
-							<p className="text-nowrap text-center font-semibold text-2xl text-content-primary">
-								Parameters Playground
-							</p>
-							<p className="text-center font-medium text-content-secondary text-sm">
-								Create dynamic parameters here, I need to figure out a better
-								copy.
-							</p>
+						<div className="flex flex-col items-center gap-2">
+							<div className="flex max-w-[258px] flex-col items-center gap-1">
+								<p className="text-nowrap text-center font-semibold text-2xl text-content-primary">
+									Parameters Playground
+								</p>
+								<p className="text-center font-medium text-content-secondary text-sm">
+									Create dynamic parameters here, I need to figure out a better
+									copy.
+								</p>
+							</div>
+							<a
+								href="#todo"
+								className="flex items-center gap-0.5 text-content-link text-sm"
+							>
+								Read the docs
+								<span className="inline">
+									<ExternalLinkIcon width={16} />
+								</span>
+							</a>
 						</div>
-						<a
-							href="#todo"
-							className="flex items-center gap-0.5 text-content-link text-sm"
-						>
-							Read the docs
-							<span className="inline">
-								<ExternalLinkIcon width={16} />
-							</span>
-						</a>
 					</div>
 				</div>
 			</div>