Best practices for forms with hydration?
So I'm setting up simple better-auth sign-up/sign-in forms. I tend to do e2e TDD these days and so i'm having trouble with playwright being unable to fill unhydrated form inputs.
https://github.com/microsoft/playwright/issues/27759 in this related issue people recommand using a useState boolean to track whether hydration is complete and disabling all fields with this boolean.
Something about this irks me...it doesn't seem like the ideal user experience to me.
I looked in the Tanstack Start docs and found the use of the <ClientOnly/> component here: https://tanstack.com/start/latest/docs/framework/react/guide/execution-model#progressive-enhancement
But this would still result in a unusable button until the page hydrates and the fallback button is swapped for the working one.
I'm just curious how others handle this scenario with standard form elements?
https://github.com/microsoft/playwright/issues/27759 in this related issue people recommand using a useState boolean to track whether hydration is complete and disabling all fields with this boolean.
Something about this irks me...it doesn't seem like the ideal user experience to me.
I looked in the Tanstack Start docs and found the use of the <ClientOnly/> component here: https://tanstack.com/start/latest/docs/framework/react/guide/execution-model#progressive-enhancement
But this would still result in a unusable button until the page hydrates and the fallback button is swapped for the working one.
I'm just curious how others handle this scenario with standard form elements?
