Summary

I am using nested GuardProvider one for public URLs and another one is for dashboard pages. Whenever I do navigation inside dashboard routes the parent also gets refreshed i.e. my dashboard layout with side nav also gets reloaded (not actual reload but I see the loader provided in the parent GuardProvider). I have a component DashboardLayout inside that only I am using GaurdProvider to show the content or say nested routes.

Relevant information

// public routes
<GuardProvider loader={abcLoader}>
    <GuardedRoute path="/signin" component={signin}>    </GuardedRoute>
    <GuardedRoute path="/dashboard" component={dashboard}>    </GuardedRoute>
</GuardProvider>

// dashboard component

// layout
    // header
    // side navigation
    // content
        <GuardProvider loader={xyzLoader}>
            <GuardedRoute path="/" component={home}>    </GuardedRoute>
            <GuardedRoute path="/analytics" component={analytics}>    </GuardedRoute>
        </GuardProvider>

in the above-given example when I am doing navigation from / i.e. home component to /analytics i.e. analytics component I see the abcLoader first and then the xtzLoader.

Is this known behaviour? or a bug? I wasn't sure so I put it in question.

Note

I am wrapping the parent GuardProvider inside ErrorBoundary and Suspense with the same abcLoader because I am using lazy load of components with React.lazy