Most places suggest showing spinners or global modals at the top-level inside app component. Regardless of how we manage them, this would mean state change in the top-level component, which would then rerender and then all the children will re-render. Isint this more expensive than say just rendering the modal or spinner inside the component which needs it? even if it means repeating code. I mean we can live with some code repitition as long as we dont have to rerender our whole component tree. Maybe i am not very experienced with react and missing somehting fundamental here
In my opinion it just depends on the context. If you're loading the data that affect the whole app (auth info, feature flags etc.) the loader should be on the top level (since the whole app should actually refresh after the data loads).
On the other hand, you can add the loader modal side by side with the root of the actual component tree, so that it doesn't cause the whole view to rerender, it's all up to the design/requirements.