Brute.Fail: Watch brute force attacks fail in real time

My suggestion: use animation. Replace the JavaScript with this:

  row.classList.add("fade-in");

  .fade-in {
      animation: 1s fade-in;
  }

  @keyframes fade-in {
      from { opacity: 0; }
  }

The alternative: use transitions, which are a tad more involved because you have to trigger the value change one frame later, so that it recognises that something has changed and interpolates to it, rather than it just being the initial value and applied instantly. This JS would do:

  row.style.transition = "1s opacity";
  row.style.opacity = 0;
  requestAnimationFrame(() => {
      row.style.opacity = 1;
  });

  tr {
      transition: 1s opacity;
  }

  .invisible {
      opacity: 0;
  }

  row.classList.add("invisible");
  requestAnimationFrame(() => {
      row.classList.remove("invisible");
  });

You might also like `vertical-align: middle` on your spin.svg.

—⁂—

On the flag icons, here’s a cool alternative technique: https://en.wikipedia.org/wiki/Regional_indicator_symbol. Lets you avoid needing even images. Unfortunately, I think Windows still doesn’t ship flags, so you’ll get the two-letter country code there. You can get around this by packaging a web font. It’d be nice if someone would neatly package a flags-only font so others can easily use it. Here’s what I did a few months back for https://ganintegrity.com/country-profiles/, resulting in a single 77KB font file:

  /**
  Copyright 2020 Twitter, Inc and other contributors
  Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/
  Twemoji Mozilla packaging via https://github.com/mozilla/twemoji-colr, subset to only include country flags.
  */
  @font-face {
      font-family: flag;
      /* (Generated with `pyftsubset /opt/firefox-nightly/fonts/TwemojiMozilla.ttf --unicodes="U+1F1E6-1F1FF" --output-file=static/TwemojiMozillaFlags.woff2 --flavor=woff2`.) */
      src: url(/static/TwemojiMozillaFlags.woff2) format("woff2");
  }
  
  /* Why do we do this? Because at the time of writing Windows doesn’t do flags, so ‹guzzled by HN› will look like “ᴀᴜ” rather than an Australian flag. (macOS and major browsers on Linux do.) */
  .flag {
      font-family: flag;
  }