Events and Persons page stacks when selected

[DimitrisMazarakis]

Bug description

When I select Events or Persons page it's like it stacks and I cannot select another page for 2-5 seconds. I think this happens because it has to load some data to these pages but if you accidentally navigate to events or persons page then you are doomed to stay there until it unstacks. And also the hotkey popup does not disappear while it is stacked.

Expected behavior

When you navigate to Events or Persons page you can instantly change to another page without menu lagging.

How to reproduce

1. Go to events or Persons page from menu or with hotkey (G + E)
2. Then try to click another page through the menu

Environment

• PostHog Cloud
• self-hosted PostHog, version/commit: 1.25.0

[fuziontech]

I can't seem to reproduce it on OSX w/ Chrome. @DimitrisMazarakis - what browser & OS are you on?

[fuziontech]

Was able to reproduce on OSX w/ Safari. Definitely more pronounced on the Persons tab, but also happens with the Events tab as well. Will block dock selection until the page is loaded it seems.

[DimitrisMazarakis]

@fuziontech I use firefox for browser and ubuntu for OS

[mariusandra]

Extra context:

This has to do with large antd tables rendering really really slow. @alexkim205 has been working on improving this and it seems that the true solution is to move to react-table or similar virtualized table library.

Related:

• Fix and standardize multiple table UI inconsistencies #4727 (comment)
• Events table gets two scrollbars on load #4870

With 6x CPU throttling enabled, it took ~6 seconds to just render the DOM nodes making up the initial table:

That plus diffing, slight layout adjustments, etc leads to a really degraded experience for basically anyone not on a M1 chip.

[paolodamico]

Fixed either by turbo mode or the new UI