From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Smooth UI with useTransition

Smooth UI with useTransition - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

Smooth UI with useTransition

“

All right. So we're going to spruce up the UI just a little bit using the Use Transition hook. So this is a React hook that helps manage UI updates by allowing you to mark certain updates as transitions. And transitions are typically non-urgent updates that can be deferred to improve user experience, things like showing a loading spinner while that update happens. And it provides two values, isPending, which is a Boolean that indicates whether the transition is ongoing, and start transition, which is a function that starts the transition. So we basically have to wrap the functionality of the add and remove to CART in start transition. And then we can basically show something when that transition is pending. And we want to show a loading spinner. So first off, let's go into our add to CART. This is components, shared product, add to CART. And we want to bring in the, let's import the use transition hook. And that's going to be from React. And I also want to bring in an icon, a loader…

Contents