motiondivision / motiondivision/motion

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

Open
#3,173 0 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature
Dominant language
TypeScript
Stars
33.7k
Forks
1.4k
Avg merge
1d 10h
Merged PRs (30d)
14

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The payload names no repository files or tests. Start with issue #1193 and the linked CodeSandbox, then clarify the proposed AnimateSuspense API and the expected transitions between fallback and streamed content; done requires an agreed implementation scope from the motion team.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.