Fixes #38708 - Slow and unresponsive settings page

[Lukshio]

No description provided.

[jeremylenz]

Thanks @Lukshio! some comments/questions below

[jeremylenz]

Who emits the load event?

[Lukshio]

It is build in generic event

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

[jeremylenz]

What happens if the load event has already been emitted upon reaching this code? Then it would never display the page.

I think we had a similar problem here -->

foreman/webpack/assets/javascripts/react_app/components/HostsIndex/index.js

Lines 121 to 135 in ee1afb9

	useEffect(() => {
	const handleLoadJS = () => {
	setAllColumns(getColumnData({ tableName: 'hosts' }));
	setAllJsLoaded(true);
	};
	if (window.allJsLoaded) {
	handleLoadJS();
	} else {
	document.addEventListener('loadJS', handleLoadJS);
	return () => {
	document.removeEventListener('loadJS', handleLoadJS);
	};
	}
	}, [setAllColumns]);
	const {

and we solved it by relying on a boolean window.allJsLoaded in addition to the event.

[jeremylenz]

Side thought: you may be able to use the existing loadJS event rather than creating a new load event.

[Lukshio]

Thanks for the review!
What is happening here is that JS is already loaded, but it starts firing its events, which "block" the page and its responses for clicking etc. even though it is "loaded" but window itself is still loading. So that is why I used 'load' event.

Nice catch with already emitted event - I replaced this code with simplified document.readyState === 'complete'. So it is not necessary to add additional eventListener and state.

[jeremylenz]

This seems better than creating our own events. @parthaa maybe we should look into doing that for HostsIndexPage too.

[ofedoren]

Thanks, @Lukshio, even though it's highly personal opinion, I think it's got even worse :D One inline thought to maybe try out:

[ofedoren]

Should we use our SkeletonLoader instead?

[Lukshio]

Thanks, @Lukshio, even though it's highly personal opinion, I think it's got even worse :D One inline thought to maybe try out:

@ofedoren The issue itself is somewhere deep in webpack and it is happening across multiple sites, this is just hotfix to prevent 'unresponsive table' by adding loader to prevent use clicking into table before full load. I think this is fastest way how to prevent this happening.

[jeremylenz]

I just tested this and it does indeed show a skeleton, but it doesn't help the loading time at all. Do we know where the bottlenecks are?

[jeremylenz]

Also one kind of odd thing is that I could click around the different tabs while the loading skeleton was showing.

[Lukshio]

I just tested this and it does indeed show a skeleton, but it doesn't help the loading time at all. Do we know where the bottlenecks are?

As I mentioned above, the issue itself is somewhere deep in webpack and it is occurring on multiple sites.

Also one kind of odd thing is that I could click around the different tabs while the loading skeleton was showing.

Yeah, that's true, it is rendered by two different components.

In my opinion, one of the solutions is to rewrite the page to fully use react - we get rid of redux state, two components, etc... But it will take more time, so for this moment, I would use this hotfix

[jeremylenz]

it is occurring on multiple sites.

Do you mean sites other than Foreman? Or multiple pages in Foreman?