jerky view transitions after moving from JSX routes and react lazy to route config

[dagda1]

I refactored my app to use the route config and the lazy prop after reading this post.

My routes now look like this:

children: [
  {
    path: 'teams/:teamid/:path',
    lazy: {
      Component: async () => {
        const mod = await import('~/pages/Deployments/TeamDeployments/TeamDeployments');
        return mod.default;
      },
    },
    HydrateFallback: Fallback,
  },

Previously, I used a combination of react lazy, Suspense and jsx routing, a bit like this

const TheRoutes = lazy(() => import('./TheRoutes'));

const applicationRoutes: InternalRoute[] = [{ path: 'somewhere/*', Component: TheRoutes }] as const;

export function ApplicationRoutes(): JSX.Element {
  return (
    <Routes>
      <Route path="/" element={<Navigate to={'/home'} replace />} />
      {applicationRoutes.map(({ path, Component }) => (
        <Route
          key={path}
          path={path}
          element={
            <Suspense fallback={<Fallback />}>
              <ProtectedRoute>
                <Component />
              </ProtectedRoute>
            </Suspense>
          }
        />
      ))}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}

Since moving from React Lazy and Suspense to the data route config, my page transitions are very jerky, with lots of flickering and flashing that was previously absent.

Is there anything I can do to smooth the page transitions, I cannot use the refactored code, it is an awful user experience.