How to lazy load a mui dialog in nextjs when it's open?

[TheMetaverseEngineer]

Hi, I have a bunch of mui dialogs and I want to lazy load them only when they get opened. How can I do that in nextjs?

[philwolstenholme]

For anyone stumbling on this in the future:

https://nextjs.org/docs/advanced-features/dynamic-import
https://beta.nextjs.org/docs/optimizing/lazy-loading

[HasanMothaffar]

Here's what I came up with:

import NiceModal from "@ebay/nice-modal-react";
import dynamic from "next/dynamic";

const LoginModal = dynamic(() => import("components/Modals/LoginModal").then((mod) => mod.LoginModal));

// Register lazy modals here
const LoginModalWrapper = () => <LoginModal id="login-modal" />;
NiceModal.register("login-modal", LoginModalWrapper);

// Use them in inner components
NiceModal.show("login-modal");

This method helped me reduce 200 KBs from the initial JS load in my app.

[supnate]

Here's what I came up with:

import NiceModal from "@ebay/nice-modal-react";
import dynamic from "next/dynamic";

// Register lazy modals here
const LoginModalWrapper = () => <LoginModal id="login-modal" />;
NiceModal.register("login-modal", LoginModalWrapper);

// Use them in inner components
NiceModal.show("login-modal");

This method helped me reduce 200 KBs from the initial JS load in my app.

Just curious, why not just use NiceModal.register("login-modal", LoginModal); without wrapper.

[philwolstenholme]

Here's what I came up with:

import NiceModal from "@ebay/nice-modal-react";
import dynamic from "next/dynamic";

// Register lazy modals here
const LoginModalWrapper = () => <LoginModal id="login-modal" />;
NiceModal.register("login-modal", LoginModalWrapper);

// Use them in inner components
NiceModal.show("login-modal");

This method helped me reduce 200 KBs from the initial JS load in my app.

Just curious, why not just use NiceModal.register("login-modal", LoginModal); without wrapper.

I think that example is incomplete? I can't see what adds the lazy loading, unless I'm missing something. dynamic is imported from Next but not used?

[HasanMothaffar]

@philwolstenholme @supnate You're right, I apologize for the incomplete example. I edited the code to include the dynamic import.

[yhunko]

Here's what I came up with:

import NiceModal from "@ebay/nice-modal-react";
import dynamic from "next/dynamic";

// Register lazy modals here
const LoginModalWrapper = () => <LoginModal id="login-modal" />;
NiceModal.register("login-modal", LoginModalWrapper);

// Use them in inner components
NiceModal.show("login-modal");

This method helped me reduce 200 KBs from the initial JS load in my app.

Just curious, why not just use NiceModal.register("login-modal", LoginModal); without wrapper.

It gives a type mismatch