78 lines
1.3 KiB
TypeScript
78 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import { loadAllWasm } from "@/utils/wasmLoader";
|
|
|
|
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 WASM...
|
|
</div>
|
|
</div>
|
|
),
|
|
});
|
|
|
|
export default function Home() {
|
|
const [isClient, setIsClient] = useState(false);
|
|
const [isWasmLoaded, setIsWasmLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsClient(true);
|
|
|
|
// Load all WASM modules
|
|
loadAllWasm()
|
|
.then(() => {
|
|
setIsWasmLoaded(true);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to load WASM modules:', error);
|
|
// Still allow the app to load, but WASM features may not work
|
|
setIsWasmLoaded(true);
|
|
});
|
|
}, []);
|
|
|
|
if (!isClient || !isWasmLoaded) {
|
|
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 WASM...
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<Playground />
|
|
</main>
|
|
);
|
|
}
|