wasm: Debounce the previews in WASM. (#791)

* wasm: Debounce the previews in WASM. This commit delays the preview requests when using the WASM editor since it can't handle the same throughput as a locally running pixlet. * Remove title for wasm
tidbyt · May 23, 2023 · 90d970e · 90d970e
1 parent ba7ba61
commit 90d970e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git a/src/features/preview/actions.js b/src/features/preview/actions.js
@@ -3,24 +3,49 @@ import { update, loading } from './previewSlice';
 import { set as setError, clear as clearErrors } from '../errors/errorSlice';
 import store from '../../store';
 
+let timeout = null;
 
 export default function fetchPreview(formData) {
-    store.dispatch(loading(true));
-    axios.post(`${PIXLET_API_BASE}/api/v1/preview`, formData)
-        .then(res => {
-            document.title = res.data.title;
-            store.dispatch(update(res.data));
-            if ('error' in res.data) {
-                store.dispatch(setError({ id: res.data.error, message: res.data.error }));
-            } else {
-                store.dispatch(clearErrors());
-            }
-        })
-        .catch(err => {
-            // TODO: fix this.
-            store.dispatch(setError({ id: err, message: err }));
-        })
-        .then(() => {
-            store.dispatch(loading(false));
-        })
+    if (PIXLET_WASM) {
+        store.dispatch(loading(true));
+        clearTimeout(timeout);
+        timeout = setTimeout(function () {
+            axios.post(`${PIXLET_API_BASE}/api/v1/preview`, formData)
+                .then(res => {
+                    store.dispatch(update(res.data));
+                    if ('error' in res.data) {
+                        store.dispatch(setError({ id: res.data.error, message: res.data.error }));
+                    } else {
+                        store.dispatch(clearErrors());
+                    }
+                })
+                .catch(err => {
+                    // TODO: fix this.
+                    store.dispatch(setError({ id: err, message: err }));
+                })
+                .then(() => {
+                    store.dispatch(loading(false));
+                })
+        }, 300);
+
+    } else {
+        axios.post(`${PIXLET_API_BASE}/api/v1/preview`, formData)
+            .then(res => {
+                document.title = res.data.title;
+                store.dispatch(update(res.data));
+                if ('error' in res.data) {
+                    store.dispatch(setError({ id: res.data.error, message: res.data.error }));
+                } else {
+                    store.dispatch(clearErrors());
+                }
+            })
+            .catch(err => {
+                // TODO: fix this.
+                store.dispatch(setError({ id: err, message: err }));
+            })
+            .then(() => {
+                store.dispatch(loading(false));
+            })
+
+    }
 }
diff --git a/src/features/schema/fields/TextInput.jsx b/src/features/schema/fields/TextInput.jsx
@@ -45,7 +45,14 @@ export default function TextInput({ field }) {
 
     const onChange = (event) => {
         setValue(event.target.value);
-        debounceConfig(event);
+        if (PIXLET_WASM) {
+            dispatch(set({
+                id: field.id,
+                value: event.target.value,
+            }));
+        } else {
+            debounceConfig(event);
+        }
     }
 
     const debounceConfig = useCallback(