Login page refreshes entire form when page hydrates, discarding any already-typed keypresses

[rmunn]

Once the $t store from $lib/i18n loads its translations, the entire login page (and other forms as well, such as the create-project page, though I only captured a screenshot from the login page) refreshes itself, apparently creating new Svelte components. This ends up discarding any currently-entered text, as seen in the GIF below. (Note that to create this GIF, I commented out the await loadI18n(); line in hooks.client.ts, so that the $t store would fail to load any translations and would end up loading only the string keys. But this behavior still happens when the $t store is loading English, it's just a lot less obvious since the server-rendered page contains the same text as the $t-rendered page.

NOTE: It's possible that it's not the $t store itself that's to blame, but rather Svelte-Kit's page hydration. Maybe before the page hydrates, I'm typing into DOM elements that then get replaced with the hydrated elements. If so, then we can't do all that much about it. But if it's the $t store changing that's causing the form elements to be replaced, it's possible that this is an issue we could fix.

[myieye]

I think this is probably it sveltejs/svelte#1755

A new pain point of SSR + hydration.

[rmunn]

Yep, the page takes a few seconds to load because it's making so many individual queries for GraphQL types, and so there's plenty of time to start typing an email address before hydration happens and replaces the <input> element with a new one.

[myieye]

We fixed this by showing loading indicators instead of forms until hydration has happened.