motiondivision / motiondivision/motion
[FEATURE] AnimateSuspense for transitions between suspense fallbacks and streamed content
Nobody has claimed this yet.
- 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
Suspensei.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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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