Create JS for slowing down the render of the Pwned Passwords search

[troyhunt]

This is described in this tweet: https://x.com/troyhunt/status/1914813713586204719

We need to show a nice transition between search son the Pwned Passwords page, the HTTP request is going much faster than the display should go.

[indyber]

@troyhunt

In the example code, there's already a fake delay when we are simulating the api call.

In password.js, on line 41, we call the checkPasswordSecurity, which in turn sets a 1500 millisecond artificial delay. I don't know how you have implemented this in the integration site, but it's should just be the same approach: Once the loading animation has started, set a timeout before calling the service that checks the password.

[troyhunt]

I think we probably have enough then for @stebet to work with what's already there, he can just close this issue off once he's done.

[troyhunt]

Seeing this again now, I want to add something that we've lost from the old site: a nice transition. At present, the screen below just appears in the blink of an eye:

Compare that to the current model where upon multiple searches, it smoother collapses and expands: https://haveibeenpwned.com/Passwords

We're missing that smoothness; let's implement a nice transition.