Skip to content

[FEATURE] AnimateSuspense for transitions between suspense fallbacks and streamed content #3173

@rutajdash

Description

@rutajdash

Is your feature request related to a problem? Please describe.
Refer Issue #1193
In light of React 19 and the push for Streaming, it seems right to reconsider adding this a feature.

Describe the solution you'd like

I just had a spike on this. My general approach, if anyone wants to take a stab, is to have a component with the same sig as Suspense i.e

<AnimateSuspense fallback={fallback}>{children}</AnimateSuspense>

Originally posted by @mattgperry in #1193

I have managed to make a simple solution which works along those lines and would love to contribute if this is a feature the motion team is willing to consider.

Describe alternatives you've considered

  • One alternative could be to just add an example/guide for users to the docs as a basic implementation is not too complex and can easily be replicated, however considering React's (and Next's with the App Router) intention to make Streaming (i.e. Suspense) a vital part of their framework, it seems like a cruitial aspect to cover within the motion library.
  • Second alternative is to create a <motion.suspense> element, but considering that suspense is not an instrisic HTML element, the <AnimateSuspence> approach seems more suitable.

Additional context
Inspiration: A great solution by @lpic10 posted in the referenced thread -> CodeSandbox

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions