[material-ui][docs] Material Icon search lags

[oliviertassinari]

Steps to reproduce

Link to live example: (required)

Steps:

1. Open https://mui.com/material-ui/material-icons/?query=alert

Screen.Recording.2024-02-16.at.01.21.13.mov

Current behavior

Main thread blocked

Expected behavior

No massive chunk of blocked time

Context

Google is aware of this problem, Chrome is feeding it back data about the page, see ahref INP data fetched from Google. Same data in https://pagespeed.web.dev/analysis/https-mui-com-material-ui-material-icons/253fjl9n29?form_factor=desktop

Horrible:

I would imagine that https://react.dev/reference/react/useTransition is the solution

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Material Icon search lags

[oliviertassinari]

Reopen per #41330 (comment).

[oliviertassinari]

We seem to be in a much better state now on https://mui.com/material-ui/material-icons/ desktop using https://pagespeed.web.dev/.

Before this issue, February 16th, 2024:

Now, October 5th, 2024:

I'm curious about the impact of the latest PR we did will have. Let's report back in 30 days.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[aarongarciah]

Have we tried leveraging content-visibility in the past? I've never used it, just wondering if it could be handy in this scenario if the rendering performance is one of the bottlenecks.

[oliviertassinari]

@aarongarciah this property seems to help the browser with the "Rendering" phase of the pipeline. I'm not sure we had performance issues with this phase. We had issue with JavaScript time, I believe.