From b6e813cb9a088b089503b7e95477cda4b60b8152 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Mon, 23 Sep 2024 12:48:44 +0530
Subject: [PATCH] fix animation performance on kanban group virtualization
 (#5666)

---
 .../issues/issue-layouts/kanban/default.tsx       |  1 +
 .../ui/loader/layouts/kanban-layout-loader.tsx    | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/core/components/issues/issue-layouts/kanban/default.tsx b/web/core/components/issues/issue-layouts/kanban/default.tsx
index 76c18102306..ebc98baa229 100644
--- a/web/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/default.tsx
@@ -193,6 +193,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
                       ignoreHeader
                       cardHeight={approximateCardHeight}
                       cardsInColumn={issueLength !== undefined && issueLength < 3 ? issueLength : 3}
+                      shouldAnimate={false}
                     />
                   }
                   defaultValue={groupIndex < 5 && subGroupIndex < 2}
diff --git a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index 57cfdab933e..93e5c10fbc9 100644
--- a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -1,11 +1,12 @@
 import { forwardRef } from "react";
+import { cn } from "@plane/editor";
 import { ContentWrapper } from "@plane/ui";
 
-export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number }>(
-  ({ cardHeight = 100 }, ref) => (
+export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number; shouldAnimate?: boolean }>(
+  ({ cardHeight = 100, shouldAnimate = true }, ref) => (
     <span
       ref={ref}
-      className={`block animate-pulse bg-custom-background-80 rounded`}
+      className={cn(`block bg-custom-background-80 rounded`, { " animate-pulse": shouldAnimate })}
       style={{ height: `${cardHeight}px` }}
     />
   )
@@ -15,22 +16,24 @@ export const KanbanColumnLoader = ({
   cardsInColumn = 3,
   ignoreHeader = false,
   cardHeight = 100,
+  shouldAnimate = true,
 }: {
   cardsInColumn?: number;
   ignoreHeader?: boolean;
   cardHeight?: number;
+  shouldAnimate?: boolean;
 }) => (
   <div className="flex flex-col gap-3">
     {!ignoreHeader && (
       <div className="flex items-center justify-between h-9 w-80">
         <div className="flex item-center gap-3">
-          <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
-          <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
+          <span className={cn("h-6 w-6 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
+          <span className={cn("h-6 w-24 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
         </div>
       </div>
     )}
     {Array.from({ length: cardsInColumn }, (_, cardIndex) => (
-      <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} />
+      <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
     ))}
   </div>
 );