Performance culprits of UI

[H4ad]

In what situation are you experiencing subpar performance?

There's two situations where I face lag:

• Try type on query builder after showing too much data on Time Series
• Logs sometimes feel slower / looks like the FPS drops

How to reproduce

For the time series, just need to fetch 1 week / 1 month of data and then try to add more filters

For the logs, just try scroll up and down fast, seems slower and looks like the FPS drops sometimes.

Your Environment

• Linux
• Mac
• Windows

Linux Mint 22.1

Additional context

From what I take a look via Inspector:

• Too much depth in the DOM (30+)
• Styled Components (https://stitches.dev/docs/benchmarks)
  • For render intensive operations, there's too much re-render and styled is not quite fast.
• Bad virtualization lib? Maybe trying alternatives
• Antd Typography looks like it's causing recalculation style + layout shift

The profile during scrolling in the logs page (production):

The purple parts it's the issue caused by usage of Typography Text

The profile during scrolling in the logs page (dev local):