BC-10902 Display loading spinner when duplicating a card (#3957)

Author: dyedwiper

src/modules/feature/board/card/CardHost.unit.ts

@@ -1,8 +1,10 @@
 import { setupAddElementDialogMock } from "../test-utils/AddElementDialogMock";
 import CardHost from "./CardHost.vue";
+import CardSkeleton from "./CardSkeleton.vue";
 import ContentElementList from "./ContentElementList.vue";
 import { CardResponse } from "@/serverApi/v3";
 import { BoardPermissionChecks, defaultPermissions } from "@/types/board/Permissions";
+import { mockedPiniaStoreTyping } from "@@/tests/test-utils";
 import setupDeleteConfirmationComposableMock from "@@/tests/test-utils/composable-mocks/setupDeleteConfirmationComposableMock";
 import { cardResponseFactory, fileElementResponseFactory } from "@@/tests/test-utils/factory";
 import { createTestingI18n, createTestingVuetify } from "@@/tests/test-utils/setup";
@@ -204,6 +206,24 @@ describe("CardHost", () => {
 
 				expect(useCardStore().duplicateCard).toHaveBeenCalledWith({ cardId });
 			});
+
+			it("should show card skeleton while duplicating", async () => {
+				mockedBoardPermissions.hasEditPermission.value = true;
+				const { wrapper } = setup();
+				const cardStore = mockedPiniaStoreTyping(useCardStore);
+				cardStore.duplicateCard.mockResolvedValueOnce();
+
+				const duplicateButton = wrapper.findComponent(KebabMenuActionDuplicate);
+				await duplicateButton.trigger("click");
+
+				const cardSkeletons = wrapper.findAllComponents(CardSkeleton);
+				expect(cardSkeletons).toHaveLength(1);
+
+				await wrapper.vm.$nextTick();
+
+				const cardSkeletonsAfterDuplicationFinished = wrapper.findAllComponents(CardSkeleton);
+				expect(cardSkeletonsAfterDuplicationFinished).toHaveLength(0);
+			});
 		});
 
 		describe("when users clicks share link menu", () => {

src/modules/feature/board/card/CardHost.vue

@@ -21,7 +21,7 @@
 				:data-scroll-target="getShareLinkId(cardId, BoardMenuScope.CARD)"
 			>
 				<template v-if="isLoadingCard">
-					<CardSkeleton :height="height" />
+					<CardSkeleton :height />
 				</template>
 				<template v-if="card">
 					<CardTitle
@@ -75,6 +75,10 @@
 				</template>
 			</VCard>
 		</CardHostInteractionHandler>
+		<VCard v-if="isDuplicating" class="mt-3">
+			<CardSkeleton :height />
+		</VCard>
+
 		<!-- Detail View -->
 		<CardHostDetailView
 			v-if="card"
@@ -103,6 +107,7 @@ import CardHostInteractionHandler from "./CardHostInteractionHandler.vue";
 import CardSkeleton from "./CardSkeleton.vue";
 import CardTitle from "./CardTitle.vue";
 import ContentElementList from "./ContentElementList.vue";
+import { useSafeTaskRunner } from "@/composables/async-tasks.composable";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import BoardMenu from "@/modules/ui/board/BoardMenu.vue"; // FIX_CIRCULAR_DEPENDENCY
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
@@ -222,11 +227,9 @@ const boardMenuClasses = computed(() => {
 	return "hidden";
 });
 
-const duplicateCard = async () => {
-	if (!card.value) return;
-
-	await cardStore.duplicateCard({ cardId: card.value.id });
-};
+const { run: duplicateCard, isRunning: isDuplicating } = useSafeTaskRunner(async () => {
+	await cardStore.duplicateCard({ cardId: props.cardId });
+});
 
 onMounted(async () => {
 	if (card.value === undefined) {