From 21e10f7ae5c6d426a416fbae35e71de24db90553 Mon Sep 17 00:00:00 2001
From: Aaron Plave <aaron.plave@jpl.nasa.gov>
Date: Tue, 7 Nov 2023 11:27:26 -0800
Subject: [PATCH] Debounce parameter form number inputs

---
 src/components/parameters/ParameterBaseNumber.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/parameters/ParameterBaseNumber.svelte b/src/components/parameters/ParameterBaseNumber.svelte
index 9ed87d48c2..e5d2afc783 100644
--- a/src/components/parameters/ParameterBaseNumber.svelte
+++ b/src/components/parameters/ParameterBaseNumber.svelte
@@ -1,6 +1,7 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
+  import { debounce } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
   import type { FormParameter, ParameterType } from '../../types/parameter';
   import { useActions, type ActionArray } from '../../utilities/useActions';
@@ -20,7 +21,16 @@
 
   const dispatch = createEventDispatcher();
 
+  let debouncedOnChange = debounce(onChange, 350, {
+    leading: true,
+    trailing: true,
+  });
+
   $: columns = `calc(${labelColumnWidth}px - ${level * levelPadding}px) auto`;
+
+  function onChange() {
+    dispatch('change', formParameter);
+  }
 </script>
 
 <div class="parameter-base-number" style="grid-template-columns: {columns}">
@@ -33,7 +43,7 @@
       {disabled}
       type="number"
       use:useActions={use}
-      on:change={() => dispatch('change', formParameter)}
+      on:change={debouncedOnChange}
     />
     <div class="parameter-right" slot="right">
       <ParameterUnits unit={formParameter.schema?.metadata?.unit?.value} />