how to "lazy" load a dialog in a .astro component?

[modern crane]

i have a simple html5 dialog in a .astro file, which is showing using DOMContentLoaded however this is increasing largest contentful paint, any way to reduce it as there is no rush to show it?

[tiny bison]

The dialog element is native to html and shouldn't require any event listners to load it

Having the js to listen for the event will definitely make it slower

[modern crane]

yeah but it's a modal i want to show just after load, you know these age-blocking-modals

[tiny bison]

Oh so you are wanting it to load/immediatly open when the page is loaded?

Otherwise I am missing something 😅

[modern crane]

yes

at the same time i'm trying to avoid increasing pagespeed values

[naive breach]

Could go blackhat, and simply not load if it the user agent is lightspeed

In the code the makes the dialog appear, check:
navigator.userAgent.includes('Chrome-Lighthouse');, and return early if it's true

[modern crane]

yeah my goal was to effectively optimise it for users too, but your suggestion may make sense under some circumstances thanks

[formal phoenix]

If it is below the fold you could use an intersection observer to load it

Don't load it until that part of the screen comes into view