diff --git a/src/screens/Signup/StepHandle/index.tsx b/src/screens/Signup/StepHandle/index.tsx index 32760f6b2a..824d366794 100644 --- a/src/screens/Signup/StepHandle/index.tsx +++ b/src/screens/Signup/StepHandle/index.tsx @@ -42,6 +42,7 @@ export function StepHandle() { const validCheck = validateServiceHandle(draftValue, state.userDomain) const { + debouncedUsername: debouncedDraftValue, enabled: queryEnabled, query: {data: isHandleAvailable, isPending}, } = useHandleAvailabilityQuery({ @@ -124,11 +125,15 @@ export function StepHandle() { ) } + const hasDebounceSettled = draftValue === debouncedDraftValue const isHandleTaken = !isPending && queryEnabled && isHandleAvailable && !isHandleAvailable.available + const isNotReady = isPending || !hasDebounceSettled + const isNextDisabled = + !validCheck.overall || !!state.error || isNotReady ? true : isHandleTaken const textFieldInvalid = isHandleTaken || @@ -188,7 +193,7 @@ export function StepHandle() { {isHandleAvailable.suggestions && isHandleAvailable.suggestions.length > 0 && - gate('handle_suggestions') && ( + (gate('handle_suggestions') || __DEV__) && ( { @@ -242,7 +247,7 @@ export function StepHandle() { diff --git a/src/state/queries/handle-availability.ts b/src/state/queries/handle-availability.ts index 140e5de35b..9391f5d09a 100644 --- a/src/state/queries/handle-availability.ts +++ b/src/state/queries/handle-availability.ts @@ -39,6 +39,7 @@ export function useHandleAvailabilityQuery( const debouncedHandle = useDebouncedValue(name, debounceDelayMs) return { + debouncedUsername: debouncedHandle, enabled: enabled && name === debouncedHandle, query: useQuery({ enabled: enabled && name === debouncedHandle,