v6.4: React.lazy + loader = waterfall?

[lili21]

const Root = React.lazy(() => import('./routes/root'))

<Suspense fallback={<div>loading...</div>}>
    <DataBrowserRouter fallbackElement={<div>loading...</div>}>
      <Route path="/" loader={loader}  element={
          <Root />
      } />
    </DataBrowserRouter>
  </Suspense>

the Root component will be start loading after the loader finished. Shouldn't they goes parallel?

[david-crespo]

One of the key features of the loader pattern is that the element is not rendered until its data is ready. If you have multiple loaders nested, those will run in parallel.

[lili21]

I get that point. I wanna know if the javascript resource and loader would run in parallel. Remix supports this feature.

[david-crespo]

Oh! I’m sorry, I missed the first line! You would have to import() inside the loader (no React.lazy), using Promise.all to make it happen in parallel with whatever else you’re doing.

The tricky part is then making the result available to your component to render it. You could return it from the loader and pull it off useLoaderData inside Root. This is kind of dicey but I think it would work. You can’t do that in Remix because loader responses are serialized and sent over the network. But in RR it’s all client-side.

[lili21]

Thanks for the ideal. I can import() inside the loader, and still using React.lazy for rendering. It should only load javascript once because of the cache.

I think Remix already support this feature for routes. the loader and the route component would load in parallel.