I am having race condition using single-spa with Angular which result Single-Spa app rendered in just direct children of html root/body for example I want to load Favorite micro app component under Header Component
<body>
<my-header>
...
<div id="single-spa-application:user-favorite></div>
</my-header>
</body>
But it happens like 10% of time the microapp will load directly under body
<body>
<my-header>...</my-header>
<div id="single-spa-application:user-favorite></div>
</body>
I think the Single-Spa microapp activeWhen matches the url and load the app, for example /favorite and then active the micro app but the page (angular header component) is not ready yet (DOM is not complete), therefore the microapp was load outside .
I would love to know some insights and what are the best practices to avoid this condition.
Thank you