[dev-launcher] Improve URL input validation responsiveness (expo#22786)

# Why

Closes ENG-7616

# How

Improve URL input validation responsiveness by debouncing the
`onChangeText` function

# Test Plan

Run dev-launcher locally through bare-expo

<table>
    <tr><th>iOS</th><th>Android</th></tr>
    <tr>
    <td>
<video
src="https://github.com/expo/expo/assets/11707729/9414318d-fc3a-45e5-b018-9726811ed53d"/>
   </td>
   <td>
<video
src="https://github.com/expo/expo/assets/11707729/b0806be9-0d9b-44e6-b8a7-c42dbaa2b34c"
/>
    </td>
</tr> 
</table> 


# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

packages/expo-dev-launcher/CHANGELOG.md

@@ -29,6 +29,7 @@
 
 - Migrate iOS native modules to use the new Module API. ([#22319](https://github.com/expo/expo/pull/22319) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Bump `babel-plugin-module-resolver` dev dependency. ([#22871](https://github.com/expo/expo/pull/22871) by [@EvanBacon](https://github.com/EvanBacon))
+- Improve URL input validation responsiveness. ([#22786](https://github.com/expo/expo/pull/22786) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ## 2.3.0 — 2023-05-08
 

packages/expo-dev-launcher/bundle/components/UrlDropdown.tsx

@@ -12,6 +12,7 @@ import {
 import * as React from 'react';
 import { TextInput as NativeTextInput, Platform, StyleSheet } from 'react-native';
 
+import { debounce } from '../functions/debounce';
 import { validateUrl } from '../functions/validateUrl';
 import { ActivityIndicator } from './ActivityIndicator';
 
@@ -39,7 +40,7 @@ export function UrlDropdown({ onSubmit, isLoading, inputValue, setInputValue }:
 
   const ref = React.useRef<NativeTextInput>();
   const [open, setOpen] = React.useState(false);
-  const [isValidUrl, setIsValidUrl] = React.useState(true);
+  const [isValidUrl, setIsValidUrl] = React.useState(validateUrl(inputValue));
 
   const [isPressing, setIsPressing] = React.useState(false);
 
@@ -50,24 +51,15 @@ export function UrlDropdown({ onSubmit, isLoading, inputValue, setInputValue }:
 
   const onConnectPress = () => {
     onSubmit(inputValue);
-    ref.current.blur();
+    ref.current?.blur();
   };
 
   const onTogglePress = () => {
     setOpen(!open);
   };
 
-  const lastExecuted = React.useRef(Date.now());
-  const throttleValidationInterval = 500;
-
   const onChangeText = (input: string) => {
-    if (!isValidUrl && input !== '') {
-      if (Date.now() >= lastExecuted.current + throttleValidationInterval) {
-        setIsValidUrl(validateUrl(input));
-        lastExecuted.current = Date.now();
-      }
-    }
-
+    setIsValidUrl(validateUrl(input));
     setInputValue(input);
   };
 
@@ -113,8 +105,7 @@ export function UrlDropdown({ onSubmit, isLoading, inputValue, setInputValue }:
               placeholder="http://10.0.0.25:19000"
               placeholderTextColor={theme.text.secondary}
               ref={ref as any}
-              value={inputValue}
-              onChangeText={onChangeText}
+              onChangeText={debounce(onChangeText)}
               onBlur={onBlur}
               testID="DevLauncherURLInput"
             />

packages/expo-dev-launcher/bundle/functions/debounce.ts

@@ -0,0 +1,7 @@
+export function debounce<T>(func: (...args: T[]) => unknown, delay = 200): typeof func {
+  let timeout: number | NodeJS.Timeout;
+  return function (...args: T[]) {
+    clearTimeout(timeout as number);
+    timeout = setTimeout(() => func(...args), delay);
+  };
+}

packages/expo-dev-launcher/bundle/screens/__tests__/HomeScreen.test.tsx

@@ -109,7 +109,7 @@ describe('<HomeScreen />', () => {
   });
 
   test('select dev session by entered url', async () => {
-    const { getByText, getByPlaceholderText } = renderHomeScreen();
+    const { getByText, getByPlaceholderText, getByTestId } = renderHomeScreen();
 
     await act(async () => {
       expect(() => getByPlaceholderText(textInputPlaceholder)).toThrow();
@@ -120,6 +120,8 @@ describe('<HomeScreen />', () => {
       expect(loadApp).toHaveBeenCalledTimes(0);
 
       fireEvent.changeText(input, 'exp://tester');
+      const loadButton = getByTestId('DevLauncherLoadAppButton');
+      await waitFor(() => expect(loadButton).not.toBeDisabled());
       fireEvent.press(getByText(/connect/i));
 
       expect(loadApp).toHaveBeenCalledTimes(1);