Code change:
Opening for visibility. I have not seen this happen myself, but I also haven't spent much time in the editor. Link to threads reporting this. Unknown, I guess usage over time. Performance not degrading over time. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
I've experienced this issue multiple times. After the donation pop-up appears, the performance of the website becomes laggy. Even after refreshing the page, it returns to normal temporarily, but the lag returns once the donation pop-up reappears. ! Note: the lag doesn't occur immediately after the pop-up, it becomes noticeable as you continue solving challenges, with delays in typing and overall slowness.
I have not noticed this in the dev environment, even if the pop-up is present there too (python course)
I thought I was crazy or that my machine was "too old" for this, but I have experienced this too. In my experience, it has happened after working a while on the editor or just doing a little bit of work on the editor, leaving it open, and then coming back. It becomes really slow and the only workaround that I have found is closing my browser completely and opening it again. Note: As a current donor, the pop-up doesn't show up in my account and I don't think is related to that component itself.
Commenting to add I experience this every single time I use the editor for more than maybe 20 minutes. It doesn't just happen suddenly. It starts with a slight delay then gets worse and worse. I just opened up Incognito with no extensions enabled, and I noticed the delay after around 15 minutes. Then by 25 minutes it was definitely worse. It isn't unusable, but if you type relatively quickly it is very noticeable that words on screen are being completed maybe 100ms after you actually type them, then gets a little worse from there. Info: Chrome/124.0.6367.158 (no extensions) macOS Ventura Responsive Web Design Certification (I have had delays throughout this entire course)
I'm able to get the slowdown both in production and in development. Reproducing it a bit loosely: Go through multiple steps (around 20?). At some point writing few characters in a row will start feel delayed/lagged. In console start appearing warnings, something like [Violation] 'input' handler took 1123ms. Recorded performance showed then longer times of redux updates coming from (if I didn't mix up anything) the editor's :
Thanks, that's really helpful! Just so I'm on the same page: how did you record the performance and did you have campfire mode on while you were testing this? Also, did you complete and submit 20 steps or just navigate through them?
Hey It was the Performance tab in the browser's developer tools. Not the profiler from react developer tools. Once I noticed the lagging, I turned on recording and did couple more steps. Then stopped recording, and tried to make heads or tails out of it :eyes: It doesn't seem to be related to campfire mode. I actually have campfire mode on in production, but when I was checking in development I believe it was off. Steps were completed/submitted. I haven't tried just navigating them.
It's not easy to read, but it does seem to be that's taking the time, which makes sense. That's what I see even when the editor is working normally. I've yet to see the slowdown from having the editor open for a long time typing a lot in a single page navigating through 80+ challenges I'll try completing a lot of challenges next and see if I see what you saw, Regardless, it seems like either the amount of typing you need to do to complete a bunch of challenges OR the completion/submission process is the problem. That's my current guess.
I'm seeing the same code editor latency after about 5 to 10 minutes of usage. I see it both in Chrome and Firefox browsers when testing in Windows 11 and Linux Fedora 40. The best solution I have is to do a of the page when it starts happening. Is the code editor overloading the cache to cause a slow down?
I'm on Windows Chrome browser and the editor is super slow for me. I type and I can't see what I've typed in till seconds later (good thing I'm a good typist) and I click Submit and it takes a long pause to respond. I tried clearing cache but it fixes the issue for maybe a couple of steps max then back to the slow performance. Definitely something I didn't experience back in early 2023 when I last used the curriculum. If there's some data I can collect to help debug, let me know. (Edit: i switched to MS Edge which I didn't use for fcc work before and the issue disappeared for the first 10 steps i tried). I may continue here for a bit before retrying chrome again at some point.) 2nd Edit: the performance improvement didn't last. Same issue occurred after a few more steps and I persisted for a couple more of these slow steps just to see if anything would change, but nothing did. So I logged off and switched back to Chrome. First few steps are back to normal performance at this point. Perhaps the pattern will repeat (and things will slow down momentarily at which point I will try another browser switch).
Hi all, thank you for reporting the issue. We are trying to reproduce the issue, but no luck yet. From what I gather, the issue can happen: On any OS (so far we have reports on MacOS, Windows, and Linux) On any browser (so far we have reports on Chrome, Firefox, and MS Edge) In both incognito and normal browsing modes With or without browser extensions To both donor and non-donor users With both campfire mode enabled and disabled I guess what's left is the challenge pages that you are on when you experience the issue. I personally have tried going through 50+ Python challenges of the , and I haven't experienced the lag. We have one user experienced the issue with the Responsive Web Design challenges (), so maybe this is where I'd try next. But we would love to get more information from everyone else: which page / course you were on when you experienced the issue. Thanks again for reporting.
The lag happens consistently to me on the Role Playing Game project (js beta) pages. Everytime I recycle my browser the issue goes away temporarily. (Or if I close the tab on edge and reopen it)
As I have , I experienced this throughout the responsive web design cert, but I have since finished that course and moved onto the JavaScript one, and can confirm I am having the exact same issue on there. The easiest way I've found to get rid of the delay is to reload page while ignoring cache.
It might be needed for user to be logged in. I've tried to reproduce it on Firefox. I've went from last steps of to about 30 step of the - without being logged in, no issues. Then after logging in, I started at the first step of , passing code was still in browser, so was just submitting it for the most part. By the 20th step writing was again slowing down. Edit: although Firefox doesn't display warning in console.
I also see it when logged in. It literally became so bad that is spiked the CPU if I held down a key and just let it repeat. It might somehow be related to the completion modal in the lower jaw, but I'm really not certain. That is at least also different depending on if you are signed in or not. The problem is, it didn't seem as bad in dev mode for me, so I'm not confident. But I removed the progress component and did twice as many steps, and it didn't happen. But as said, I'm really not sure if I trust it in dev mode. In the Performance log, looking at the bottom-up tab, was the first one.
Thanks everyone. I've finally reproduced it by doing ~20 responsive web design lessons while signed in. It does seem like is part of the problem, thanks I'm not sure it's the root of the problem, but it's definitely getting called far too often. My plan is to create a quick PR to stop the unnecessary calls and/or memoize the function. Hopefully that fixes it, but we'll have to see.
I was briefly looking at the Progress component and saw ProgressInner  Something about that code doesn't sit right with me. The and variable names seems a little like something that wasn't fully checked and tested. If I just log when the component renders, it does so on every keystroke, and even just left-clicking inside the active editor section logs a re-render. This is after you have completed at least one challenge step. ! Might not be related, but it doesn't seem right considering it isn't even shown. I'm a little skeptical of the Intersection observer and useEffect. I know this isn't very constructive, but that's all I've got for now.
I agree about the naming, it's a little sloppy. And, yes, something is going wrong meaning that it's getting re-rendered after challenge completion. makes it a lot better, though. It's still rendering when you start a new challenge (and it shouldn't), but it no longer renders in response to, well, everything.
I have unpinned the issue, considering it is closed as completed.
Hi Guys i am still experiencing this on two separate machines both running windows 11 and Chrome Browser extension installed , ublock origin and Ghostery this is whilst going through the responsive web design curriculum, in both building a balance sheet and the cat painting projects. I have experienced this behaviour both before and after i became a supported, and most recently experienced it about 5mins ago
Thank you for mentioning. However, the potential fix for this has not been deployed to production yet. So, until that is deployed, you can expect the issue to be present.
Hi everyone, the potential fix has been deployed, please report back if you're still experiencing the issue. Thank you for your patience, and happy coding.
hi , I've been using the JS beta curriculum all day from a single tab today. I did end up running into the performance issue again but it took a -lot- longer to run into it, and it was not lagging as bad as it used to when I would type (one of the issues I saw was that I would type and it would take a bit of time for the editor to display what I typed). Now when it slows down, the lag is not nearly as long (and as I said, I ran through a lot of steps today before seeing the slow-down). This is just to let you know what I have observed as you've asked us to report back. Thanks for the fix(es) already done.
Thanks for the follow-up, Some slowdown is expected, since the 'fix' was to make rendering considerably more efficient. This delays and mitigates the slowdown, but clearly something is getting less efficient over time. Since it's not too bad at the moment and it's hard to pin down the ultimate cause, I think we can leave this for now. We do plan to give the client some love before too long and that will give us another chance to squash the bug.
Hi Guys I am still running in to this issue, im currently working my way through learn-basic-javascript-by-building-a-role-playing-game. and after about 10 mins the typing of text starts to lag, im having to refresh the page and it seems to make it go away for a while
Other reports of slow performance
Thanks I'll give this another look.
should be another decent perf boost. Same deal as last time: while I expect this to be a lot better, there may still be deeper problems.
Tentatively closing again, since has been merged and should help considerably.

Related discussion:
text: ); }; <del> export const completedPercentageSelector = state => { const isSignedIn = isSignedInSelector(state); if (isSignedIn) { const completedChallengesIds = completedChallengesIdsSelector(state); const { id } = challengeMetaSelector(state); const currentBlockIds = currentBlockIdsSelector(state); const completedPercentage = getCompletedPercentage( completedChallengesIds, currentBlockIds, id ); return completedPercentage; } else return 0; }; </del> <ins> export const completedPercentageSelector = createSelector( isSignedInSelector, completedChallengesSelector, challengeMetaSelector, currentBlockIdsSelector, (isSignedIn, completedChallenges, { id }, currentBlockIds) => { if (isSignedIn) { const completedPercentage = getCompletedPercentage( completedChallenges.map(node => node.id), currentBlockIds, id ); return completedPercentage; } else return 0; } ); </ins> export const isBlockNewlyCompletedSelector = state => { const completedPercentage = completedPercentageSelector(state);