Upload button ignores clicks right after the page loads #53

New issue

Open

opened 2026-10-03 19:44:41 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:41 +00:00

Member

What's wrong
The Upload button in the navbar is visible as soon as the HTML arrives, but it does nothing until React has finished loading (hydration). On a slow connection, clicking it right away does nothing and the click is lost.

How to reproduce

Sign in, open DevTools > Network and set throttling to "Slow 4G".
Reload and click the Upload icon as soon as it appears: nothing opens.
Wait a few seconds and click again: the dialog opens.

Expected
The button either works when clicked or looks disabled until it can.

Where to look

web/src/app/components/Navbar.tsx: the Upload button. The theme toggle next to it already waits for mounted; do the same here, or render the button disabled until mounted.
web/src/app/components/ModalRender.tsx: ModalUploadOne is loaded with dynamic(..., { ssr: false }), so the first open also waits for a code chunk; consider preloading it once mounted.
The lint cleanup issue suggests replacing mounted flags with a useSyncExternalStore hook; either is fine here.

Done when

Under "Slow 4G", the first click on Upload either opens the dialog or the button visibly cannot be clicked yet.
No hydration warnings in the console.

**What's wrong** The Upload button in the navbar is visible as soon as the HTML arrives, but it does nothing until React has finished loading (hydration). On a slow connection, clicking it right away does nothing and the click is lost. **How to reproduce** 1. Sign in, open DevTools > Network and set throttling to "Slow 4G". 2. Reload and click the Upload icon as soon as it appears: nothing opens. 3. Wait a few seconds and click again: the dialog opens. **Expected** The button either works when clicked or looks disabled until it can. **Where to look** - `web/src/app/components/Navbar.tsx`: the Upload button. The theme toggle next to it already waits for `mounted`; do the same here, or render the button disabled until mounted. - `web/src/app/components/ModalRender.tsx`: `ModalUploadOne` is loaded with `dynamic(..., { ssr: false })`, so the first open also waits for a code chunk; consider preloading it once mounted. - The lint cleanup issue suggests replacing `mounted` flags with a `useSyncExternalStore` hook; either is fine here. **Done when** - [ ] Under "Slow 4G", the first click on Upload either opens the dialog or the button visibly cannot be clicked yet. - [ ] No hydration warnings in the console.

jalenluorion added this to the Phase 1 milestone

2026-10-03 19:44:41 +00:00

jalenluorion added the

good first issue

bug

frontend

labels

2026-10-03 19:44:41 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00