A

webui/src/app/page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+
+const Playground = dynamic(() => import("@/components/Playground"), {
+	ssr: false,
+	loading: () => (
+		<div
+			style={{
+				position: "absolute",
+				left: 0,
+				top: 0,
+				bottom: 0,
+				right: 0,
+				padding: "8px",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+			}}
+		>
+			<div>
+				Loading{" "}
+				<a
+					href="https://github.com/rhaiscript/playground"
+					target="_blank"
+				>
+					Rhai Playground
+				</a>
+				...
+			</div>
+		</div>
+	),
+});
+
+export default function Home() {
+	const [isClient, setIsClient] = useState(false);
+
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+
+	if (!isClient) {
+		return (
+			<div
+				id="loading"
+				style={{
+					position: "absolute",
+					left: 0,
+					top: 0,
+					bottom: 0,
+					right: 0,
+					padding: "8px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+				}}
+			>
+				<div>
+					Loading{" "}
+					<a
+						href="https://github.com/rhaiscript/playground"
+						target="_blank"
+					>
+						Rhai Playground
+					</a>
+					...
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<main>
+			<Playground />
+		</main>
+	);
+}