Skip to content

feat(pokemon): debounce async validator and reset validating state in finalize #180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

OrlPep
Copy link

@OrlPep OrlPep commented Aug 9, 2025

Context

The register form’s async Pokémon validator currently issues a network request on each keystroke and toggles the validating spinner accordingly.

Motivation / Problem Statement

Rapid typing triggers multiple unnecessary API calls, keeps the validating spinner active and causes visible flicker as validation rapidly starts/stops. Debouncing prevents redundant requests and avoids unnecessary validation cycles and spinner flicker during continuous typing.

Solution Overview

  • Add a 500 ms debounce using timer + switchMap so the request is sent only after typing pauses.
  • Move the isPokemonValidating reset into finalize so it runs after both success and error paths (single, consistent state flip).
  • Set pokemonId = -1 when the input is empty to reflect the absence of a selected Pokémon and avoid superfluous requests.
  • Keep pokemonName updates unchanged aside from the debounce flow.
  • Keep the replacement strategy on error:
    catchError(() => of({ pokemonName: true })), ensuring the validator always returns a value (either null or an error object) even when the request fails.

Scope of Change

File changed: src/app/core/validators/pokemon.validator.ts only.
No changes to component templates, routes, or backend APIs.

User-Visible Behavior

  1. A validation request is sent only after 500 ms without typing.
  2. The validating flag (isPokemonValidating) is set once per validation attempt and reset after completion, no rapid on/off toggles during typing.
  3. The spinner no longer flickers during continuous input.
  4. Empty input does not trigger a request and clears the stored Pokémon ID (pokemonId = -1).

Testing Instructions

Run: npm i && npm start

  1. Open the register page and focus the Pokémon field.
  2. Type quickly (e.g., pika…), then pause:
    • Before (reference GIF): multiple requests while typing; spinner toggles rapidly.
    • After: a single request is sent ~500 ms after typing stops; spinner remains steady during the typing phase and turns off after the request completes.
  3. Clear the field:
    • No request is made.
    • isPokemonValidating is false.
    • pokemonId becomes -1.
  4. Enter a valid Pokémon name → no validation error.

Performance / UI State Notes

  • Fewer network requests during continuous typing.
  • Fewer spinner state transitions during input (eliminates flicker caused by rapid validation cycles).

Related Links / Issues

N/A

Before / After GIFs

Before

Before

  • Multiple API requests sent during rapid typing.
  • Spinner toggles on/off multiple times causing visible flicker.

After

After

  • Single API request sent after 500 ms pause.
  • Spinner stays steady during typing and stops cleanly after validation completes.

Checklist

  • Lint passes (npm run lint)
  • Build passes (npm run build)
  • No public API or routing changes
  • Attach two short GIFs (before/after) showing request timing and spinner behavior

Copy link

netlify bot commented Aug 9, 2025

Deploy Preview for angular-example-app ready!

Name Link
🔨 Latest commit 950d34c
🔍 Latest deploy log https://app.netlify.com/projects/angular-example-app/deploys/6897859d9b46530008053d56
😎 Deploy Preview https://deploy-preview-180--angular-example-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

return of(null);
}

this.pokemonName.set(pokemonName.toLowerCase());
this.pokemonName.set(pokemonName);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the extra .toLowerCase() call here because the value was already being normalized earlier in validate().

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant