isPending is not working as intended

[robsoncloud]

Hello there,

Is there a reason why the Activate/Deactivate button never transition to disabled?

"use client";
import` { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { useState, useTransition } from "react";
import {
  deleteProduct,
  toggleProductAvailability,
} from "../../_actions/products";

export function ActiveToggleDropdownItem({
  id,
  isAvailableForPurchase,
}: {
  id: string;
  isAvailableForPurchase: boolean;
}) {
  const [isPending, startTransition] = useTransition();

  return (
    <DropdownMenuItem
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await toggleProductAvailability(id, !isAvailableForPurchase);
        });
      }}
    >
      {isAvailableForPurchase ? "Deactivate" : "Activate"}
    </DropdownMenuItem>
  );
}

My package.json

`"dependencies": {
    "@prisma/client": "5.14.0",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.379.0",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.23.8"
  },`

[teweldeH]

Hey You are missing a refresh() of the current page, like so: https://github.com/WebDevSimplified/next-js-ecommerce-mvp/blob/main/src/app/admin/products/_components/ProductActions.tsx#L26

    <DropdownMenuItem
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await toggleProductAvailability(id, !isAvailableForPurchase)
          router.refresh()
        })
      }}
    >

[bencipher]

Hey You are missing a refresh() of the current page, like so: https://github.com/WebDevSimplified/next-js-ecommerce-mvp/blob/main/src/app/admin/products/_components/ProductActions.tsx#L26

    <DropdownMenuItem
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await toggleProductAvailability(id, !isAvailableForPurchase)
          router.refresh()
        })
      }}
    >

Nice one

[robsoncloud]

I've added the router.refresh() and did not make any difference:

export async function toggleProductAvailability(id: string, isAvailableForPurchase: boolean) {
    const product = await prisma.product.findUnique({ where: { id: id } })

    // force await to simulate a delay
    await new Promise(resolver => setTimeout(resolver, 3000))

    if (product == null) return notFound()

    await prisma.product.update({
        where: { id: id }, data: {
            isAvailableForPurchase
        }
    })
}

export function ActiveToggleDropdownItem({ id, isAvailableForPurchase }: ActiveToggleDropdownItemProps) {
    const [isPending, startTransition] = useTransition()
    const router = useRouter()

    return (
        <DropdownMenuItem disabled={isPending} onClick={() => {
            startTransition(async () => {
                await toggleProductAvailability(id, !isAvailableForPurchase)
                router.refresh()
            })
        }}>
            {isAvailableForPurchase ? "Deactivate" : "Activate"}
        </DropdownMenuItem>
    )

}

The dropdown button remains enabled