latent pawn
Is there a way to trigger something when a dynamic import is completed?
I have a editor component that needs to be imported dynamically.
I also have other components on the page.
Now I want the page to display a loading bar while the editor is loading and not show any of the other components.
This is one approach I tried, but the promise of the import never resolves.
So the console log is never printed.
const MDXEditor = dynamic(() => import("./MDXEditor").then((mod) => {
console.log('Editor loaded');
resolveEditorLoaded();
return mod;
}), {
ssr: false,
loading: () => <p>Loading...</p>
});
...
const [isEditorLoaded, setIsEditorLoaded] = useState(false);
useEffect(() => {
const loadEditor = async () => {
await editorLoadedPromise;
setIsEditorLoaded(true);
};
loadEditor();
}, []);
I also tried using <Suspense> to wrap the stuff on the page but it never renders the fallback content so that does not seem to work.
Lastly I tried awaiting another import but the timing is off.
So the import I'm awaiting completes before the dynamic import is loaded, which looks really bad.
const [isEditorLoaded, setIsEditorLoaded] = useState(false);
useEffect(() => {
const loadEditor = async () => {
await import("./MDXEditor");
setIsEditorLoaded(true);
};
loadEditor();
}, []);
azure imp