Developer documentation pages hog CPU

[RichHorrocks]

Apologies in advance if this isn't the correct channel to use - it wasn't clear who to report this to!

Bug Report

Not an issue with SUIR per se, but with the associated developer documentation pages, a subset of which I've found to be (almost) unusable. I've been using them over the past month or so and the issue has been consistent.

On navigating to certain pages I started noticing my laptop fan spin up and the pages being slow to respond. On closer investigation, it looks like some of the pages are caught in some sort of re-render tight loop.

For example, the Grid page: https://react.semantic-ui.com/collections/grid/.

Consistently reproducible. It appears to be an issue on most pages, but not all. Chrome browser on Ubuntu.

See the below screenshot for an idea of what's going on. (For the 11 seconds that I profiled, 10 of them were spent rendering.)

Steps

Navigate to various developer pages.

Expected Result

My laptop not to melt.

Actual Result

My laptop melting.

Version

Current site as deployed.

Testcase

None required.

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[charliematters]

I mentioned this in #3784 but it was closed without comment, and it looks like it's also been raised here: #3978

[knight-coder-llc]

Can you list the other pages you are experiencing with this issue, I provided the fix in #3978, I added the fix to component doc example. Considering that this is brought up again I suspect it is the same issue with the Semantic UI Visibility component being used in other places in the documentation example pages. I made slight change to the semantic visibility component directly to test for the grid page you mentioned and replacing that with react intersection observer resolved cpu usage for /collections/grid displayed is a 45 sec. measurement.

[knight-coder-llc]

If this is the case with Semantic Visibility component it will need to be refactored or replaced entirely, that would depend on the repository owner to decide the best course of action. Once you update with the other pages I will do some testing to confirm.

[RichHorrocks]

@knight-coder-llc - thanks for taking a look.

I tested the pages in the Elements sub-section. Most of them have the issue, as per the following list:

Button Input Label List Loader Placeholder Segment Step

The following did not have the issue:

Container Divider Rail Reveal

If you need me to check other pages I can do. (For example, the Table page definitely has the issue.)

[layershifter]

Honestly, not idea from where it comes... Does not seem related to Visibility component at all...