BC-5162: card content not loading race condition after dragging (#2821)

* add timeout before fetching the card to debounce backend race condition
* correction of card-skeleton height to for smoother placeholder transition

src/components/data-board/CardState.composable.ts

@@ -10,6 +10,7 @@ import {
 } from "@/serverApi/v3";
 import { BoardCard } from "@/types/board/Card";
 import { ElementMove } from "@/types/board/DragAndDrop";
+import { delay } from "@/utils/helpers";
 import { useSharedEditMode } from "@data-board";
 import { nextTick, onMounted, reactive, toRef } from "vue";
 import { useBoardApi } from "./BoardApi.composable";
@@ -40,6 +41,7 @@ export const useCardState = (
 	const { setEditModeId } = useSharedEditMode();
 
 	const fetchCard = async (id: string): Promise<void> => {
+		await delay(100);
 		try {
 			cardState.card = await fetchCardFromApi(id);
 		} catch (error) {

src/components/data-board/CardState.composable.unit.ts

@@ -7,6 +7,7 @@ import NotifierModule from "@/store/notifier";
 import { BoardCard } from "@/types/board/Card";
 import { AnyContentElement } from "@/types/board/ContentElement";
 import { ElementMove } from "@/types/board/DragAndDrop";
+import { delay } from "@/utils/helpers";
 import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { axiosErrorFactory } from "@@/tests/test-utils";
@@ -40,6 +41,9 @@ const setup = (cardId = "123123", emitFn = emitMock) => {
 jest.mock("./BoardApi.composable");
 const mockedUseBoardApi = jest.mocked(useBoardApi);
 
+jest.mock("@/utils/helpers");
+const mockedDelay = jest.mocked(delay);
+
 jest.mock("@util-board");
 const mockedUseBoardNotifier = jest.mocked(useBoardNotifier);
 
@@ -85,6 +89,7 @@ describe("CardState composable", () => {
 	let testCard: BoardCard;
 
 	beforeEach(() => {
+		jest.useFakeTimers();
 		mockedSharedCardCalls =
 			createMock<ReturnType<typeof useSharedCardRequestPool>>();
 
@@ -114,7 +119,8 @@ describe("CardState composable", () => {
 			const cardId = "123124";
 
 			setup(cardId);
-
+			// jest.runAllTimers();
+			await nextTick();
 			expect(mockedSharedCardCalls.fetchCard).toHaveBeenCalledWith(cardId);
 		});
 
@@ -269,15 +275,15 @@ describe("CardState composable", () => {
 			mockedSharedCardCalls.fetchCard.mockResolvedValue(testCard);
 			mockedBoardApiCalls.updateCardHeightCall = jest
 				.fn()
-				.mockResolvedValue({ status: 300 });
+				.mockResolvedValue({ status: 500 });
 			const boardCard = boardCardFactory.build();
 			const { updateCardHeight, card } = setup(boardCard.id);
 			card.value = boardCard;
 
+			await nextTick();
 			await updateCardHeight(300);
-
-			expect(boardCard.height).toEqual(200);
 			expect(mockedErrorHandlerCalls.handleError).toHaveBeenCalled();
+			expect(boardCard.height).toEqual(200);
 		});
 	});
 

src/components/feature-board/card/CardSkeleton.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="d-flex justify-center align-center"
-		:style="{ 'min-height': height + 'px' }"
+		:style="{ 'min-height': height - 24 + 'px' }"
 	>
 		<VProgressCircular
 			color="primary"