Test: 347 make playwright wait for hydrated not networkidle #354
Conversation
Instead of covering with overlay, because (1) it's weird to cover up a loaded page (2) it doesn't block keypresses
We don't have to wait until NetworkIdle/Hydrated, because the app blocks user interaction automatically.
myieye
force-pushed
the
test/347-make-playwright-wait-for-hydrated-not-networkidle
branch
from
159cd96
to
1311e97
Compare
There was a problem hiding this comment.
it's not my favorite design, but I played with it and my best idea was to just disable inputs and buttons, that greys them out and prevents interaction, but I didn't like that either. It really comes down to the fact that this just sucks and I don't like that the user can't interact with the page once it's rendered.
For the inputs on the admin page can we disable them instead of hiding them? it seems weird to have that void there.
|
@hahn-kev The problem with disabling the input fields is that we can't block Playwright unless we actually disable/enable them with JS and I thought it would be nice if we could avoid JS for this. I also don't think it would be a huge visual improvement to show disabled inputs. I think some sort of navigation/loading indicator (#197) will likely give us the UX boost we need. |
myieye
deleted the
test/347-make-playwright-wait-for-hydrated-not-networkidle
branch
Resolves #347
Instead of explicitly making Playwright wait for hydration, it seemed more appropriate for the app to block user interaction before hydration.
I initially went for a minimal loading overlay (5b79da9), which I included in the history, because it wasn't terrible.
But, it seemed so weird to cover up loaded HTML...
So, I transitioned to making things that tend to need hydration
visibility: hiddenand in cases where I know that it's a container (only a form so far), it's possible to add a "loading skeleton".Out of date
Log.in.-.Google.Chrome.2023-10-27.11-58-36.mp4
Log.in.-.Google.Chrome.2023-10-27.11-59-53.mp4
EDIT: new version (I just couldn't become friends with that weird huge gradient, so I transitioned to a simpler loading animation):
Log.in.-.Google.Chrome.2023-10-27.13-39-09.mp4