Best practices for site wide modals

[alexfoxy]

I'm creating a website that has a number (20) of full screen modals accessible from all pages. Functionally they work well and make the website and give a sort of native feel on mobile.

However, in total they add about 100kb of page weight, is there a best practice to load these on the fly? Currently they are components that just sit in the Main app component and appear when a state change occurs.

Is there any guidance for this?

[todortotev]

https://reactjs.org/docs/portals.html maybe?

[enricoschaaf]

Maybe try using dynamic imports? Seems like there is no need to load these on page load. https://nextjs.org/docs/advanced-features/dynamic-import