remove spinner from delete button when executing deletion from multi selection bar (#943)

Author: ameer2468

apps/web/app/(org)/dashboard/caps/Caps.tsx

@@ -13,15 +13,17 @@ import { toast } from "sonner";
 import { useEffectMutation } from "@/lib/EffectRuntime";
 import { Rpc, withRpc } from "@/lib/Rpcs";
 import { useDashboardContext } from "../Contexts";
+import {
+	NewFolderDialog,
+	SelectedCapsBar,
+	UploadCapButton,
+	UploadPlaceholderCard,
+} from "./components";
 import { CapCard } from "./components/CapCard/CapCard";
 import { CapPagination } from "./components/CapPagination";
 import { EmptyCapState } from "./components/EmptyCapState";
 import type { FolderDataType } from "./components/Folder";
 import Folder from "./components/Folder";
-import { NewFolderDialog } from "./components/NewFolderDialog";
-import { SelectedCapsBar } from "./components/SelectedCapsBar";
-import { UploadCapButton } from "./components/UploadCapButton";
-import { UploadPlaceholderCard } from "./components/UploadPlaceholderCard";
 import { useUploadingContext } from "./UploadingContext";
 
 export type VideoData = {
@@ -149,7 +151,7 @@ export const Caps = ({
 						document.activeElement?.tagName || "",
 					)
 				) {
-					deleteCaps.mutate(selectedCaps);
+					deleteCaps(selectedCaps);
 				}
 			}
 
@@ -197,7 +199,7 @@ export const Caps = ({
 		});
 	};
 
-	const deleteCaps = useEffectMutation({
+	const { mutate: deleteCaps, isPending: isDeletingCaps } = useEffectMutation({
 		mutationFn: Effect.fn(function* (ids: Video.VideoId[]) {
 			if (ids.length === 0) return;
 
@@ -252,7 +254,7 @@ export const Caps = ({
 		},
 	});
 
-	const deleteCap = useEffectMutation({
+	const { mutate: deleteCap, isPending: isDeletingCap } = useEffectMutation({
 		mutationFn: (id: Video.VideoId) => withRpc((r) => r.VideoDelete(id)),
 		onSuccess: () => {
 			toast.success("Cap deleted successfully");
@@ -324,11 +326,11 @@ export const Caps = ({
 								key={cap.id}
 								cap={cap}
 								analytics={analytics[cap.id] || 0}
-								onDelete={async () => {
+								onDelete={() => {
 									if (selectedCaps.length > 0) {
-										await deleteCaps.mutateAsync(selectedCaps);
+										deleteCaps(selectedCaps);
 									} else {
-										deleteCap.mutateAsync(cap.id);
+										deleteCap(cap.id);
 									}
 								}}
 								userId={user?.id}
@@ -351,8 +353,8 @@ export const Caps = ({
 			<SelectedCapsBar
 				selectedCaps={selectedCaps}
 				setSelectedCaps={setSelectedCaps}
-				deleteSelectedCaps={() => deleteCaps.mutate(selectedCaps)}
-				isDeleting={deleteCaps.isPending}
+				deleteSelectedCaps={() => deleteCaps(selectedCaps)}
+				isDeleting={isDeletingCaps || isDeletingCap}
 			/>
 			{isDraggingCap && (
 				<div className="fixed inset-0 z-50 pointer-events-none">

apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx

@@ -63,7 +63,7 @@ export interface CapCardProps extends PropsWithChildren {
 	};
 	analytics: number;
 	isLoadingAnalytics: boolean;
-	onDelete?: () => Promise<any>;
+	onDelete?: () => void;
 	userId?: string;
 	sharedCapCard?: boolean;
 	isSelected?: boolean;

apps/web/app/(org)/dashboard/caps/components/SelectedCapsBar.tsx

@@ -25,8 +25,8 @@ export const SelectedCapsBar = ({
 }: SelectedCapsBarProps) => {
 	const [confirmOpen, setConfirmOpen] = useState(false);
 
-	const handleConfirmDelete = async () => {
-		await deleteSelectedCaps();
+	const handleConfirmDelete = () => {
+		deleteSelectedCaps();
 		setConfirmOpen(false);
 	};
 
@@ -70,7 +70,6 @@ export const SelectedCapsBar = ({
 							onClick={() => setConfirmOpen(true)}
 							disabled={isDeleting}
 							className="size-[40px] min-w-[unset] p-0"
-							spinner={isDeleting}
 							size="sm"
 						>
 							<FontAwesomeIcon className="w-3.5 text-white" icon={faTrash} />

apps/web/app/(org)/dashboard/caps/components/index.ts

@@ -0,0 +1,7 @@
+export * from "./CapPagination";
+export * from "./EmptyCapState";
+export * from "./Folder";
+export * from "./NewFolderDialog";
+export * from "./SelectedCapsBar";
+export * from "./UploadCapButton";
+export * from "./UploadPlaceholderCard";