Loading.tsx or suspense fallback loading-end transition?
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
I am a bit confused how to appropriately handle loading state transitions when using react server components with either loading.tsx or suspense fallbacks.
I have a page that is being rendered after fetching some data in the react server component. I want to pass a skeletized view to the client while that data is fetched. I can do that either by using a
These approaches both work as expected. And when data is being fetched the client displays the loading component or file. However when loading finishes the loading component is immediately replaced with the page.tsx or served component. This is for the most part fine, but ideally I want some kind of transition.
Specifically I need to do a specific transition on the loading file/component. Not just a simple blur either, its a component that is somewhat complex and I need to tell it to do a specific thing before being unloaded and replaced. (In this case its a deck gl display of the world and I want it to quickly zoom in to the location to be displayed by the soon to be replaced page.tsx). Is there any way to hook into some functionality to tell nextjs to not immediately replace this file but instead allow it to do some kind of exit transition?
I have a page that is being rendered after fetching some data in the react server component. I want to pass a skeletized view to the client while that data is fetched. I can do that either by using a
loading.tsx file in the app router structure shared with the page.tsx or I can do it by wrapping my component in a Suspense boundary, and having the fallback component be my loading component. These approaches both work as expected. And when data is being fetched the client displays the loading component or file. However when loading finishes the loading component is immediately replaced with the page.tsx or served component. This is for the most part fine, but ideally I want some kind of transition.
Specifically I need to do a specific transition on the loading file/component. Not just a simple blur either, its a component that is somewhat complex and I need to tell it to do a specific thing before being unloaded and replaced. (In this case its a deck gl display of the world and I want it to quickly zoom in to the location to be displayed by the soon to be replaced page.tsx). Is there any way to hook into some functionality to tell nextjs to not immediately replace this file but instead allow it to do some kind of exit transition?
2 Replies
@Brown bear I am a bit confused how to appropriately handle loading state transitions when using react server components with either loading.tsx or suspense fallbacks.
I have a page that is being rendered after fetching some data in the react server component. I want to pass a skeletized view to the client while that data is fetched. I can do that either by using a `loading.tsx` file in the app router structure shared with the `page.tsx` or I can do it by wrapping my component in a Suspense boundary, and having the fallback component be my loading component.
These approaches both work as expected. And when data is being fetched the client displays the loading component or file. However when loading finishes the loading component is immediately replaced with the page.tsx or served component. This is for the most part fine, but ideally I want some kind of transition.
Specifically I need to do a specific transition on the loading file/component. Not just a simple blur either, its a component that is somewhat complex and I need to tell it to do a specific thing before being unloaded and replaced. (In this case its a deck gl display of the world and I want it to quickly zoom in to the location to be displayed by the soon to be replaced page.tsx). Is there any way to hook into some functionality to tell nextjs to not immediately replace this file but instead allow it to do some kind of exit transition?
that's pretty hard since what react does behind the scenes with
i.e. it just replaces the component.
you can explore
Suspense is basicallyif (loading) return <Fallback />
return <Children />i.e. it just replaces the component.
you can explore
AnimatePresence from framer motion, or the new experimental react api for the view transitions api [ref 1](https://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition) [ref 2](https://github.com/facebook/react/pull/31975). but it'll be hard.Brown bearOP
Thanks for the references, I'll take a gander. I feel as though this is somewhat of an oversight but I am sure I can find a hack to make it working as well as we'd like