With CSR, I see components inside Suspense rendering without waiting for CreateAsync's data

This happens on client side routing.

const routeData: Accessor<ProfileRouteData | undefined> = createAsync(() =>
    getData()
  );

const routeData: Accessor<ProfileRouteData | undefined> = createAsync(() =>
    getData()
  );

<Suspense fallback={<DottedLoader color="#999" />}>
  <Header
            headerImageUrl={
                ? routeData()?.config?.clientLogoUrl
                : defaultImageUrl
            }
  />
</Suspense>

<Suspense fallback={<DottedLoader color="#999" />}>
  <Header
            headerImageUrl={
                ? routeData()?.config?.clientLogoUrl
                : defaultImageUrl
            }
  />
</Suspense>

When I directly land on the route, I get the correct image. But when I visit it from some other page, I always see it rendering the default image.

1 Reply

Madaxen86•5mo ago

That’s probably just because when loading the page with refresh by the time the server streams the response to the browser the promise is resolved and it shows the actual logo. If you‘d add a timeout to the getData would will probably also see the fallback image first. You can use the route load function to preload getData when hovering over an A component. The data is already available on the cache (assuming you have wrapped get data in solid router’s cache function)

Gaming

Programming

With CSR, I see components inside Suspense rendering without waiting for CreateAsync's data