TanStack•2y ago•

7 replies

dead-brown

Different Suspense behaviour depending on where a user comes from

I have a question about Suspense, that might be more a general React question, but maybe someone has an idea with respect to tanstack Router.

Is it possible to have different Suspense behaviour (different Suspense boundaries), depending on how a user reaches a route?

Example: I have a

Suspense

Suspense

component around Route

/a

/a

export const Route = createFileRoute("/a/")({
  component: () => (
    <Suspense fallback={"wait"}>
      <MyPage />
    </Suspense>
  )
});

export const Route = createFileRoute("/a/")({
  component: () => (
    <Suspense fallback={"wait"}>
      <MyPage />
    </Suspense>
  )
});

When a user opens

/a

/a

in its browser I want that fallback to be displayed (and that works with the code above.)

But: on another route

/b

/b

I have a

Link

Link

/a

/a

. When a user clicks that link, I want the user to stay on

/b

/b

until

/a

/a

could completely be rendered (or at least until the "topmost" promise is resolved). I would like to display a loading indicator on

/b

/b

using

MatchRoute

MatchRoute

or something like this.

Using a

MatchRoute

MatchRoute

/b

/b

works, but the problem is, that from

/b

/b

's point-of-view,

/a

/a

is considered to be rendered as soon as the

Suspense

Suspense

fallback component (

"wait"

"wait"

) kicks in. So I stay on

/b

/b

only until the fallback component of

/a

/a

is rendered.

Is there a way to get the behaviour I like to have? (btw I'm pretty sure that in next.js the behaviour is the same)

thanks a ton!

TanStack•2y ago•

7 replies

dead-brown

Different Suspense behaviour depending on where a user comes from

Suspense

Suspense

component around Route

/a

/a

export const Route = createFileRoute("/a/")({
  component: () => (
    <Suspense fallback={"wait"}>
      <MyPage />
    </Suspense>
  )
});

export const Route = createFileRoute("/a/")({
  component: () => (
    <Suspense fallback={"wait"}>
      <MyPage />
    </Suspense>
  )
});

When a user opens

/a

/a

in its browser I want that fallback to be displayed (and that works with the code above.)

But: on another route

/b

/b

I have a

Link

Link

/a

/a

. When a user clicks that link, I want the user to stay on

/b

/b

until

/a

/a

could completely be rendered (or at least until the "topmost" promise is resolved). I would like to display a loading indicator on

/b

/b

using

MatchRoute

MatchRoute

or something like this.

Using a

MatchRoute

MatchRoute

/b

/b

works, but the problem is, that from

/b

/b

's point-of-view,

/a

/a

is considered to be rendered as soon as the

Suspense

Suspense

fallback component (

"wait"

"wait"

) kicks in. So I stay on

/b

/b

only until the fallback component of

/a

/a

is rendered.

Is there a way to get the behaviour I like to have? (btw I'm pretty sure that in next.js the behaviour is the same)

thanks a ton!

Different Suspense behaviour depending on where a user comes from

Similar Threads

Different Suspense behaviour depending on where a user comes from

Similar Threads

Similar Threads

Similar Threads