Next.js Discord

Discord Forum

startTransition with updateTag?

Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
Open in Discord
African Slender-snouted CrocodileOP
Is there any way to show a transition while the page is refreshing as a result of calling updateTag in a server function? The updateTag API is synchronous so wrapping my server function in startTransition only runs a transition for the actual server function, not the updateTag.

Use case would be showing a loading spinner or similar next to the element that is expected to refresh.

6 Replies

Greek Shepherd
Good to know: updateTag immediately expires the cached data for the specified tag. The next request will wait to fetch fresh data rather than serving stale content from the cache, ensuring users see their changes immediately.
African Slender-snouted CrocodileOP
Yeah, so I suspect what that means is the answer is "no", but it does feel like it's a relatively common pattern to want to display an indicator that some data is stale?
Greek Shepherd
No it means that calling updateTag doesnt result in the page being refreshed. U can use the refresh function from next/cache for that.
Use refresh to refresh the users client router (person who called the action)
Use updateTag to expire a cache so that the next time anybody requests the same route, the server will fetch new data
@African Slender-snouted Crocodile Is there any way to show a transition while the page is refreshing as a result of calling updateTag in a server function? The updateTag API is synchronous so wrapping my server function in startTransition only runs a transition for the actual server function, not the updateTag. Use case would be showing a loading spinner or similar next to the element that is expected to refresh.
Pacific herring
You can, but it depends on where and how you want to display the spinner.
If the component is wrapped in a suspense boundary, then you can change the key to make the suspense fallback reappear.
The fallback to actual content transition is instant, but you can make it smooth by wrapping the suspense wrapper with the new ViewTransition wrapper to make it transition properly.
African Slender-snouted CrocodileOP
@Pacific herring thanks let me experiment with that soon
@African Slender-snouted Crocodile <@1035334925810941972> thanks let me experiment with that soon
Pacific herring
Aight.
Let me know if it works, or if it doesn't.