feat(editor): Debounce input for smoother UX

ff6347 · Nov 8, 2023 · 2495c28 · 2495c28
1 parent 1699d4a
commit 2495c28
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,13 @@
-# Astro Starter Kit: Basics
+# P5 Code Sandbox
 
-```sh
-npm create astro@latest -- --template basics
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+Small experiment to have a code sandbox for testing p5.js code. Based on [this blog](https://joyofcode.xyz/create-a-coding-sandbox) post "Create a JavaScript Code Sandbox" by Matija.
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+## Development
 
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+```bash
+npm ci
+npm run dev
+```
 
 ## 🚀 Project Structure
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
 		"@types/react": "18.2.35",
 		"@types/react-dom": "18.2.14",
 		"astro": "3.4.3",
+		"lodash.debounce": "4.0.8",
 		"p5": "1.8.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",

diff --git a/src/components/Sandbox.tsx b/src/components/Sandbox.tsx
@@ -1,5 +1,7 @@
-import "./sandox.css";
+import debounce from "lodash.debounce";
 import React from "react";
+import "./sandox.css";
+
 import Editor from "@monaco-editor/react";
 //@ts-ignore
 import globals from "@types/p5/global.d.ts?raw";
@@ -12,29 +14,23 @@ interface SandboxProps {
 	description: string;
 	initialCode: string;
 }
-export function debounce(callback: () => void, delay = 500): () => void {
-	let timerId: NodeJS.Timeout;
-
-	return () => {
-		clearTimeout(timerId);
-		timerId = setTimeout(callback, delay);
-	};
-}
 
 export default function Sandbox(props: SandboxProps) {
 	const iframeRef = React.useRef(null);
 	const [code, setCode] = React.useState(props.initialCode);
+	const debouncedSetCode = debounce((value) => setCode(value), 500);
+
 	React.useEffect(() => {
 		console.log("code changed");
 		if (iframeRef.current) {
 			const iframe = iframeRef.current;
 
 			const source = /* html */ `
-						<html>
-						<head>
-								<link rel="stylesheet" href="/iframe.css">
-								<script src="${import.meta.env.PUBLIC_BASE_URL}/lib/p5.js"></script>
-				<style>
+			<!DOCTYPE html>
+				<html>
+					<head>
+						<link rel="stylesheet" href="/iframe.css">
+						<style>
 				body {
 					font-family: "Inter", sans-serif;
 					overflow: hidden;
@@ -69,7 +65,8 @@ export default function Sandbox(props: SandboxProps) {
 		}
 	}, [code]);
 	const handleEditorChange = (value, event) => {
-		setCode(value);
+		debouncedSetCode(value);
+
 		// here is the current value
 		// debounce(() => setCode((prev) => value));
 	};
@@ -114,10 +111,10 @@ export default function Sandbox(props: SandboxProps) {
 	}
 	return (
 		<div className="sandbox">
-			{/* <div className="loading" data-loading>
+			<div className="loading" data-loading>
 				<div className="loader"></div>
 				<h1>Loading P5.js Sandbox</h1>
-			</div> */}
+			</div>
 			<section className="code">
 				<Editor
 					height="100vh"

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
-  "extends": "astro/tsconfigs/base",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
-  }
-}
+	"extends": "astro/tsconfigs/base",
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "react"
+	}
+}