Make variant / image updates use useOptimistic and startTransition
#1327
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -21,14 +22,21 @@ export function VariantSelector({ | |||
| const router = useRouter(); | |||
| const pathname = usePathname(); | |||
| const searchParams = useSearchParams(); | |||
| const [optimisticVariants, setOptimsticVariants] = useOptimistic(variants); | |||
There was a problem hiding this comment.
Nit
| const [optimisticVariants, setOptimsticVariants] = useOptimistic(variants); | |
| const [optimisticVariants, setOptimisticVariants] = useOptimistic(variants); |
|
|
||
| const optionUrl = createUrl(pathname, optimisticOptions); | ||
|
|
||
| // Navigate without page reload |
There was a problem hiding this comment.
I'm not sure this comment's 100% accurate. It seems that the navigation can't complete without a full page render – at least in the sense that the search params are up-to-date, etc. While the UI is ready to interact with due to the useOptimistic hook, it's still waiting for the full page render before the search params update, so it's now open to race conditions for anything reading from the search params (eg, adding to cart)
|
Replaced by #1365 |
|
Hi @leerob |
|
It reverts back to the last previous successful state – which is good! You can then show errors like a toast if you want. |
CleanShot.2024-04-18.at.19.46.53.mp4