How do you do the same concept with dynamic imports?

[cybervaldez]

I hope you can help me. The mounts would animate enter appropriately but would not use any exit animation.

// Page.js
const MyComponent = dynamic(() => import('MyComponent'), 
{
    loading : () => { 
        return <motion.div key="loader" initial={{ opacity: 0 }} animate={{ opacity : 1 }} exit={{ opacity : 0, x : 1000 }}>
                    <p>Loading...</p>
                </motion.div>
        },
        ssr : false
}
);

const Page = ()=>{
    function done(){
        alert("I should be called...") // does not get called
    }
    return <AnimatePresence exitBeforeEnter onExitComplete={done}>
        <MyComponent/>
    </AnimatePresence>

}

// MyComponent.js
export function MyComponent(){
    return <motion.div key="mycomponent" initial={{ opacity: 0 }} animate={{ opacity : 1 }} exit={{ opacity : 0, x : 1000 }}>Compo</motion.div>
}