From 97a13ad815ec191046a95abe2f815281530eb259 Mon Sep 17 00:00:00 2001
From: Stephen Glass <stephen@stephen.glass>
Date: Wed, 18 Sep 2024 23:27:27 -0400
Subject: [PATCH] secret widget perf improvements

Signed-off-by: Stephen Glass <stephen@stephen.glass>
---
 .changeset/silent-gifts-dream.md              |  5 ++++
 .../components/SecretWidget/SecretWidget.tsx  | 28 +++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/silent-gifts-dream.md

diff --git a/.changeset/silent-gifts-dream.md b/.changeset/silent-gifts-dream.md
new file mode 100644
index 0000000000..f939ce8ac2
--- /dev/null
+++ b/.changeset/silent-gifts-dream.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Improve performance of typing into scaffolder secret widget
diff --git a/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx b/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx
index 6b9094c199..25aec236fb 100644
--- a/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx
+++ b/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx
@@ -17,7 +17,8 @@
 import { WidgetProps } from '@rjsf/utils';
 import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';
 import TextField from '@material-ui/core/TextField';
-import React from 'react';
+import React, { useMemo, useState } from 'react';
+import debounce from 'lodash/debounce';
 
 /**
  * Secret Widget for overriding the default password input widget
@@ -38,16 +39,31 @@ export const SecretWidget = (
     disabled,
   } = props;
 
+  const [localValue, setLocalValue] = useState(secrets[name] ?? '');
+
+  // Memoize the debounced function so it persists across re-renders
+  const debouncedSetSecrets = useMemo(
+    () =>
+      debounce((value: string) => {
+        setSecrets({ [name]: value });
+      }, 300),
+    [setSecrets, name],
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    onChange(Array(newValue.length).fill('*').join(''));
+    debouncedSetSecrets(newValue);
+  };
+
   return (
     <TextField
       id={title}
       label={title}
       aria-describedby={title}
-      onChange={e => {
-        onChange(Array(e.target.value.length).fill('*').join(''));
-        setSecrets({ [name]: e.target.value });
-      }}
-      value={secrets[name] ?? ''}
+      onChange={handleChange}
+      value={localValue}
       type="password"
       autoComplete="off"
       required={required}