fix: remove flesh on share import

src/client/App.tsx

@@ -30,6 +30,7 @@ import {
 TooltipTrigger,
 } from "@/client/components/Tooltip";
 import { rpc } from "@/utils/rpc";
+import { useLoaderData, type LoaderFunctionArgs } from "react-router";
 
 type GoPreviewDef = (v: unknown) => Promise<string>;
 
@@ -53,9 +54,37 @@ declare class Go {
 run(instance: WebAssembly.Instance): Promise<void>;
 }
 
+export const loader = async ({ params }: LoaderFunctionArgs) => {
+const { id } = params;
+if (!id) {
+return;
+}
+
+try {
+const res = await rpc.parameters[":id"].$get({ param: { id } });
+if (res.ok) {
+const { code } = await res.json();
+return code;
+}
+} catch (e) {
+console.error(`Error loading playground: ${e}`);
+return;
+}
+};
+
 export const App = () => {
 const $wasmState = useStore((state) => state.wasmState);
 const $setWasmState = useStore((state) => state.setWasmState);
+const $setCode = useStore((store) => store.setCode);
+const code = useLoaderData<typeof loader>();
+
+useEffect(() => {
+if (!code) {
+return;
+}
+
+$setCode(code);
+}, [code, $setCode]);
 
 // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 useEffect(() => {

src/client/Editor.tsx

@@ -35,8 +35,6 @@ import { highlight, languages } from "prismjs/components/prism-core";
 import "prismjs/components/prism-hcl";
 import "prismjs/themes/prism.css";
 import { cn } from "@/utils/cn";
-import { rpc } from "@/utils/rpc";
-import { useParams } from "react-router";
 
 // Adds line numbers to the highlight.
 const hightlightWithLineNumbers = (input: string, language: unknown) =>
@@ -49,7 +47,6 @@ const hightlightWithLineNumbers = (input: string, language: unknown) =>
 .join("\n");
 
 export const Editor: FC = () => {
-const params = useParams();
 const $code = useStore((state) => state.code);
 const $setCode = useStore((state) => state.setCode);
 
@@ -65,27 +62,6 @@ export const Editor: FC = () => {
 setCodeCopied(() => true);
 };
 
-useEffect(() => {
-const loadCode = async () => {
-const { id } = params;
-if (!id) {
-return;
-}
-
-try {
-const res = await rpc.parameters[":id"].$get({ param: { id } });
-if (res.ok) {
-const { code } = await res.json();
-$setCode(code);
-}
-} catch (e) {
-console.error(`Error loading playground: ${e}`);
-return;
-}
-};
-
-loadCode();
-}, [params, $setCode]);
 
 useEffect(() => {
 if (!codeCopied) {

src/client/index.tsx

@@ -3,11 +3,12 @@ import { ThemeProvider } from "@/client/contexts/theme.tsx";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { RouterProvider, createBrowserRouter, redirect } from "react-router";
-import { App } from "./App.tsx";
+import { App, loader as appLoader } from "./App.tsx";
 import "@/client/index.css";
 
 const router = createBrowserRouter([
 {
+loader: appLoader,
 path: "/parameters/:id?",
 Component: App,
 },