fix: keep window capture overlays fully transparent on start

Author: diiviikk5

apps/desktop/src/App.tsx

@@ -256,6 +256,14 @@ function createThemeListener(currentWindow: WebviewWindow) {
 }
 
 function LoadingScreen() {
+	if (
+		location.pathname === "/target-select-overlay" ||
+		location.pathname === "/window-capture-occluder" ||
+		location.pathname === "/recordings-overlay"
+	) {
+		return <div class="h-screen w-screen bg-transparent" />;
+	}
+
 	return (
 		<div class="flex h-screen w-screen items-center justify-center bg-[#0d111a]/95 p-6">
 			<div class="drift-panel flex min-w-[18rem] items-center gap-4 rounded-[28px] px-6 py-5">

apps/desktop/src/routes/window-capture-occluder.tsx

@@ -1,5 +1,5 @@
 import { getAllWindows } from "@tauri-apps/api/window";
-import { Show, Suspense } from "solid-js";
+import { Show } from "solid-js";
 import { createCurrentRecordingQuery } from "~/utils/queries";
 
 export default function () {
@@ -24,57 +24,48 @@ export default function () {
 	};
 
 	return (
-		<Suspense>
-			<Show when={bounds()}>
-				{(bounds) => {
-					getAllWindows().then((w) =>
-						w.forEach((w) => {
-							if (w.label === "camera" || w.label === "in-progress-recording")
-								w.setFocus();
-						}),
-					);
+		<Show when={bounds()}>
+			{(bounds) => {
+				getAllWindows().then((w) =>
+					w.forEach((w) => {
+						if (w.label === "camera" || w.label === "in-progress-recording")
+							w.setFocus();
+					}),
+				);
 
-					return (
-						<div class="size-full absolute inset-0 *:absolute *:bg-black/50 *:pointer-events-none">
-							{(() => {
-								const { size, position } = bounds();
-								return (
-									<>
-										{/* Top blind */}
-										<div
-											class="top-0 left-0 w-full"
-											style={{ height: `${position.y}px` }}
-										/>
-										{/* Bottom blind */}
-										<div
-											class="left-0 bottom-0 w-full"
-											style={{ top: `${position.y + size.height}px` }}
-										/>
-										{/* Left blind */}
-										<div
-											class="left-0"
-											style={{
-												top: `${position.y}px`,
-												width: `${position.x}px`,
-												height: `${size.height}px`,
-											}}
-										/>
-										{/* Right blind */}
-										<div
-											class="right-0"
-											style={{
-												top: `${position.y}px`,
-												left: `${position.x + size.width}px`,
-												height: `${size.height}px`,
-											}}
-										/>
-									</>
-								);
-							})()}
-						</div>
-					);
-				}}
-			</Show>
-		</Suspense>
+				return (
+					<div class="size-full absolute inset-0 *:absolute *:bg-black/50 *:pointer-events-none">
+						{(() => {
+							const { size, position } = bounds();
+							return (
+								<>
+									<div class="top-0 left-0 w-full" style={{ height: `${position.y}px` }} />
+									<div
+										class="left-0 bottom-0 w-full"
+										style={{ top: `${position.y + size.height}px` }}
+									/>
+									<div
+										class="left-0"
+										style={{
+											top: `${position.y}px`,
+											width: `${position.x}px`,
+											height: `${size.height}px`,
+										}}
+									/>
+									<div
+										class="right-0"
+										style={{
+											top: `${position.y}px`,
+											left: `${position.x + size.width}px`,
+											height: `${size.height}px`,
+										}}
+									/>
+								</>
+							);
+						})()}
+					</div>
+				);
+			}}
+		</Show>
 	);
 }