Recommended way to preloading/lazyloading component code in loaders based on params

[codeart1st]

I have a route with a path param $formId and a lot of different complicated UI for different forms, so codesplitting is really necessary. I don't want to define every possible route for formId as a static route and keep a dynamic param.

With react-router it's possible to return components imported dynamically with import() as loader data. In tanstack/router loader data needs to be serializable, so my old approach will not work.

The current idea is another Suspense but the problem with this is an initial flicker and not a smooth transition.

import { createFileRoute, lazyRouteComponent, useParams } from '@tanstack/react-router'
import { Suspense } from 'react'
import type { AsyncRouteComponent } from '@tanstack/react-router'

const Form1= lazyRouteComponent(() => import('./Form1'))

const getFormComponent = (formId: string): AsyncRouteComponent<unknown> => {
  switch (formId) {
    case 'form1':
      return Form1
    case 'form2':
    // ... many more
  }
  throw new Error(`Unknown formId: ${formId}`)
}

const FormularWrapper = () => {
  const formId = useParams({ from: '/path/to/form/$formId', select: (params) => params.formId })
  const Comp = getFormComponent(formId)
  return (
    <Suspense fallback={<div>this should never be visible</div>}>
      <Comp />
    </Suspense>
  )
}

export const Route = createFileRoute('/path/to/form/$formId')({
  component: FormularWrapper,
  loader: async ({ params: { formId } }) => {
    await getFormComponent(formId)?.preload?.()
  }
})

[schiller-manuel]

With react-router it's possible to return components imported dynamically with import() as loader data. In tanstack/router loader data needs to be serializable, so my old approach will not work.

can you show some more context? why wouldnt react-router not serialize loader data?

[codeart1st]

Here is an example https://stackblitz.com/edit/vitejs-vite-4r9ri1a3?file=index.html
It shows the current idea and also the problems with this solution. If you navigate the first time to the different forms there is a short flicker. If you revisit routes in the same session the flicker is gone.

[codeart1st]

https://stackblitz.com/edit/vitejs-vite-ssirmgyb?file=src%2Froutes%2F%24formId.tsx

In this example it's possible to return components in loader like in react-router. Maybe the TS error in my own project is something else and not a tanstack problem?

[codeart1st]

The TypeScript error in my project is gone, after updating tanstack/router to a newer patch version. So now everything seems to be ok.

[schiller-manuel]

yes there was a mixup where pure SPA router also applied serializability checks. thats fixed now