pending component flashing on screen no matter what I do. Is it possible to make it show only below the navbar?

[GarrisonBates]

I've read several somewhat similar issues on this but don't see anything that works. I've tried setting defaultPendingMs and defaultPendingMinMs to 0. No cigar.

I have autoCodeSplitting enabled, and am currently using no beforeLoad or loader anywhere in my code. But whenever I refresh the page, my pendingComponent flashes on the screen.

My BaseContainer component contains the navbar, and since it's in __root.tsx it should be in the main bundle, never being lazy loaded. I've just migrated from react router, and the expected behavior (which was possible with react router and I imagine is possible in TSR) is for the pendingComponent / loading spinner to appear below the navbar, rather than covering the whole screen.

But in my case, when I refresh the page it flashes on screen below the navbar (which is how I want it to do), but then it flashes again and covers the whole screen. I'm hoping someone more experienced with TSR will be able to point me in the right direction, since I'm thinking this might be a common issue. I can try and make a stackblitz if necessary but hopefully it won't come to that.

I have the following main.tsx:

const router = createRouter({
  routeTree,
  context: {
    clubId: undefined,
    account: undefined,
  },
  defaultNotFoundComponent: NotFoundPage,
  defaultPendingComponent: () => {
    console.log('DEFAULT PENDING COMPONENT')
    return <div className="absolute h-10 w-10 top-0 left-0 bg-blue-9" />
  },
  defaultPendingMs: 0,
  defaultPendingMinMs: 0,
})

export type LinkPath = ValidateLinkOptions<RegisteredRouter>['to']

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
  interface HistoryState {
    // @TODO: Strong typing using actual routes
    from?: string
    // from?: ValidateLinkOptions<RegisteredRouter>['to']
    token?: string
  }
}

const App = () => {
  /**
   * Register service worker so that caching is enabled, allowing usage offline or with garbage Internet:
   */
  const isUpdateNotificationOpen = useServiceWorker()

  return (
    <PostHogProvider>
      <QueryClientProvider>
        <JotaiProvider>
          <UpdateNotification isOpen={isUpdateNotificationOpen} />
          <ToastContainer />
          <AuthProvider>
            <InnerApp />
          </AuthProvider>
        </JotaiProvider>
        <ReactQueryDevtools buttonPosition="bottom-right" />
      </QueryClientProvider>
    </PostHogProvider>
  )
}

const InnerApp = () => {
  const account = useAccount()
  // useNotifications is here because it needs to be descendant of <QueryClientProvider>.
  useNotifications()
  return <RouterProvider router={router} context={{ account }} />
}

// Render the app
const rootElement = document.getElementById('root')!
if (!rootElement.innerHTML) {
  const root = createRoot(rootElement)
  root.render(<App />)
}

And root.tsx:

export interface RouteContext {
  clubId: number | undefined
  account: Account | null | undefined
}

export const Route = createRootRouteWithContext<RouteContext>()({
  component: Root,
})

function Root() {
  return (
    <>
      <BaseContainer>
        <GlobalErrorBoundary>
          <ModalProvider>
            <MapContainer>
              <Outlet />
            </MapContainer>
          </ModalProvider>
        </GlobalErrorBoundary>
      </BaseContainer>
      <TanStackRouterDevtools />
    </>
  )
}

[schiller-manuel]

really a complete minimal example would help

[GarrisonBates]

Figured it out. I had a lazy import for a heavy Map component higher up in the tree and didn't have any <Suspense> wrapping it. Somehow this worked as intended when I was using React Router but I wrapped it in a Suspense and it's working great. Sorry to bother