Microfrontends in ReactJs

Hi fellow geeks,
I have a legacy web application using ReactJs and we're going to split teams based on business domains which are 3 domains so I would want to create 3 microfrontends with one application shell handling the routing and having the header and left hand menu and footer.
I used webpack module federation and migrated some of the code into the microfrontend but I noticed once I redirect to the microfrontend the browser displays a white screen then the microfrontend loads... I tried using Suspense with lazy load but still the white screen is displayed i guess it's because the browser is loading the html assets and transforming the files and loading dependencies but is there a way to fix this performance issue ?
One more thing I have unified components for the design system (Buttons, RadioButtons, Inputs, dropdowns...) I don't want to duplicate the code across the microfrontends and I was thinking having them as web components but I read some reviews where webcomponents aren't advised to be used I want to have a web component for the button using the design system we have in our webapp and to be able to use across all microfrontends and the application shell ... what's the best practice to do that ?