UI elements remain clickable during initial data fetch/loading screen #7587
Description
Did you clear cache before opening an issue?
- I have cleared my cache
Is there an existing issue for this?
- I have searched the existing open and closed issues
Does the issue happen when logged in?
Yes
Does the issue happen when logged out?
No
Does the issue happen in incognito mode when logged in?
Yes
Does the issue happen in incognito mode when logged out?
No
Account name
azurenightlock
Account config
{"theme":"phantom","themeLight":"serika","themeDark":"serika_dark","autoSwitchTheme":false,"customTheme":false,"customThemeColors":["#323437","#e2b714","#e2b714","#646669","#2c2e31","#d1d0c5","#ca4754","#7e2a33","#ca4754","#7e2a33"],"favThemes":[],"showKeyTips":true,"smoothCaret":"medium","codeUnindentOnBackspace":false,"quickRestart":"tab","punctuation":false,"numbers":false,"words":25,"time":15,"mode":"time","quoteLength":[0,1,2,3],"language":"english","fontSize":2,"freedomMode":false,"difficulty":"normal","blindMode":false,"quickEnd":false,"caretStyle":"default","paceCaretStyle":"default","flipTestColors":false,"layout":"default","funbox":[],"confidenceMode":"off","indicateTypos":"off","compositionDisplay":"replace","timerStyle":"mini","liveSpeedStyle":"off","liveAccStyle":"off","liveBurstStyle":"off","colorfulMode":false,"randomTheme":"off","timerColor":"main","timerOpacity":"1","stopOnError":"off","showAllLines":false,"keymapMode":"off","keymapStyle":"staggered","keymapLegendStyle":"lowercase","keymapLayout":"overrideSync","keymapShowTopRow":"layout","keymapSize":1,"fontFamily":"Roboto_Mono","smoothLineScroll":false,"alwaysShowDecimalPlaces":false,"alwaysShowWordsHistory":false,"singleListCommandLine":"on","capsLockWarning":true,"playSoundOnError":"off","playSoundOnClick":"off","soundVolume":0.5,"startGraphsAtZero":true,"showOutOfFocusWarning":true,"paceCaret":"off","paceCaretCustomSpeed":100,"repeatedPace":true,"accountChart":["on","on","on","on"],"minWpm":"off","minWpmCustomSpeed":100,"highlightMode":"letter","typedEffect":"keep","typingSpeedUnit":"wpm","ads":"result","hideExtraLetters":false,"strictSpace":false,"minAcc":"off","minAccCustom":100,"monkey":false,"repeatQuotes":"off","oppositeShiftMode":"off","customBackground":"","customBackgroundSize":"cover","customBackgroundFilter":[0,1,1,1],"customLayoutfluid":["qwerty","colemak"],"customPolyglot":["english","tamil"],"monkeyPowerLevel":"off","minBurst":"off","minBurstCustomSpeed":100,"burstHeatmap":false,"britishEnglish":false,"lazyMode":false,"showAverage":"off","showPb":false,"tapeMode":"off","tapeMargin":50,"maxLineWidth":0,"playTimeWarning":"off"}
Current Behavior
The app currently faces a leaky loading state. While the "Downloading user data" progress bar is active, the underlying UI remains fully interactive. This allows users to trigger navigation or component states (like the account/login menu) before the application has established the user's session or loaded the necessary configuration.
In the screenshot provided below, I am able to access my account and notifications while the website is still loading my account data. I am also able to access the: Start Test, Leaderboard, About, Settings and all the elements in the div with the id="testConfig". I am able to click all the elements in the footer despite it not being visually shown. However I am unable to click the change language button(The cursor isn't in pointer mode aswell).
Expected Behavior
I shouldn't be able to hover and see the navbar UI elements. When the website is still loading I should only be able to see the progress bar and the MonkeyType Logo.
Steps To Reproduce
- Log in to an account.
- Place your cursor on the bell icon (The bug happens to most of the components in the navbar so any icon should be fine).
- Press CTRL + R (To refresh the page)
- While the data is being loaded, Move your cursor slightly to activate the hover effect.
Environment
- OS: Windows 11
- Browser: Google Chrome
- Browser Version: 145.0.7632.160 (Official Build) (64-bit)
Anything else?
No response