How to lazy load a mui dialog in nextjs when it's open? about nice-modal-react HOT 6 OPEN

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

from nice-modal-react.

For anyone stumbling on this in the future:

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

from nice-modal-react.

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.

from nice-modal-react.

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.

from nice-modal-react.

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?

from nice-modal-react.

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

from nice-modal-react.