diff --git a/config/live_preview.php b/config/live_preview.php index b5da9a0f8cd..6e213fc953f 100644 --- a/config/live_preview.php +++ b/config/live_preview.php @@ -33,6 +33,18 @@ // ], + /* + |-------------------------------------------------------------------------- + | Debounce + |-------------------------------------------------------------------------- + | + | The number of milliseconds to wait before updating Live Preview after + | content changes. + | + */ + + 'debounce_ms' => (int) env('STATAMIC_LIVE_PREVIEW_DEBOUNCE_MS', 150), + /* |-------------------------------------------------------------------------- | Force Reload Javascript Modules diff --git a/resources/js/components/ui/LivePreview/LivePreview.vue b/resources/js/components/ui/LivePreview/LivePreview.vue index 0b092a0fb95..c10ec99ec10 100644 --- a/resources/js/components/ui/LivePreview/LivePreview.vue +++ b/resources/js/components/ui/LivePreview/LivePreview.vue @@ -106,6 +106,8 @@ watch( { deep: true }, ); +const livePreviewDebounceMs = Statamic.$config.get('livePreview.debounce_ms', 150); + const update = debounce(() => { if (source) source.abort(); source = new AbortController(); @@ -128,7 +130,7 @@ const update = debounce(() => { if (e.code === 'ERR_CANCELED') return; throw e; }); -}, 150); +}, livePreviewDebounceMs); function componentUpdated(handle, value) { extras.value[handle] = value;