[docs-infra] Fix Emphasized Code Loading State

[dav-is]

Note

Upstream PR: mui/mui-public#1303

Preview Deploy

Emphasized lines (blue background // @highlight) are not appearing on first render, despite being marked highlightAt: 'init':

After:

Also, emphasized lines are always shown on first render, even with highlightAt: 'idle' to avoid a large blue flash

Closes: #4653

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4659
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4659
  

commit: be76b2b

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	0B(0.00%)	0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,371.32 ms +27.06 ms^(+2.0%) | Renders: 53 ⁽⁺⁰⁾ | Paint: 2,096.56 ms +13.17 ms^(+0.6%)

Test	Duration	Renders
Select mount (200 instances)	174.08 ms 🔺+31.91 ms(+22.4%)	3 (+0)
Mixed surface mount (app-like density)	110.22 ms 🔺+18.15 ms(+19.7%)	5 (+0)
Menu mount (300 instances)	146.64 ms 🔺+13.72 ms(+10.3%)	2 (+0)
Checkbox mount (500 instances)	89.74 ms 🔺+10.55 ms(+13.3%)	1 (+0)
Menu open (500 items)	74.85 ms 🔺+6.04 ms(+8.8%)	12 (+0)

...and 7 more. View full report

Details of benchmark changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	be76b2b
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/69eb7760bdde530007eb1958
😎 Deploy Preview	https://deploy-preview-4659--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[aarongarciah]

Not sure if it's meant to be used like this, but nesting word highlighting in nested highlighted lines breaks the line highlighting:

/* @highlight-start */
&[data-starting-style],
&[data-ending-style] {
  /* @highlight-start */
  opacity: 0;
  transform: scale(0.9); /* @highlight-text "transform" */
  /* @highlight-end */
}
/* @highlight-end */

[dav-is]

@aarongarciah that looks like a bug, thanks for mentioning, I'll draft a fix

Edit: PR