fix animation performance on kanban group virtualization

makeplane · Sep 20, 2024 · 27d1db9 · 27d1db9
1 parent 66cfc73
commit 27d1db9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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>
 );