How to retrigger the pendingComponent when using `useSuspenseQuery`

export const postsRoute = createRoute({
  getParentRoute: () => dashboardRoute,
  path: 'posts',
  validateSearch: z.object({
    limit: z.string().optional(),
  }),
  loaderDeps: ({ search: { limit } }) => ({ limit }),
  loader: ({ context: { queryClient }, deps: { limit } }) =>
    queryClient.ensureQueryData(postsQueryOptions(limit)),
  component: () => <PostsComponent />,
  pendingComponent: () => <div>I am pending</div>,
  errorComponent: () => <div>An error occurred while loading the logs for this connection</div>,
})

function PostsComponent() {
  const router = useRouter()
  const search = postsRoute.useSearch()
  const navigate = postsRoute.useNavigate()
  const { limit } = search
  const { data, refetch, isRefetching } = useSuspenseQuery(postsQueryOptions(limit))
  return (
    <div>
      <button
        onClick={async () => {
          await router.invalidate()
          await navigate({ search: { limit: 10 } })
          await refetch()
        }}
      >
        Limit by 10 posts
      </button>
      {/* posts stuff here */}
    </div>
  )
}