Debounce validation to avoid ui jitter

cartridge-gg · Dec 3, 2024 · 3c5f2cc · 3c5f2cc
1 parent 90e60a7
commit 3c5f2cc
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx
@@ -108,8 +108,15 @@ export function CreateController({
     error: undefined,
   });
 
-  const { debouncedValue: username } = useDebounce(usernameField.value, 100);
-  const validation = useUsernameValidation(username);
+  // Debounce validation quickly to reduce latency
+  const { debouncedValue: validationUsername } = useDebounce(
+    usernameField.value,
+    25,
+  );
+
+  const validation = useUsernameValidation(validationUsername);
+  // Debounce the validation result rather than the input value
+  const { debouncedValue: debouncedValidation } = useDebounce(validation, 200);
 
   const { isLoading, error, setError, handleSubmit } = useCreateController({
     onCreated,
@@ -153,7 +160,7 @@ export function CreateController({
     <CreateControllerView
       theme={theme}
       usernameField={usernameField}
-      validation={validation}
+      validation={debouncedValidation}
       isLoading={isLoading}
       error={error}
       onUsernameChange={handleUsernameChange}