binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix animation performance on kanban group virtualization (#5666)

Browse source
This commit is contained in:
rahulramesha 2024-09-23 12:48:44 +05:30 • committed by GitHub
parent f328772b82
commit b6e813cb9a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/core/components/issues/issue-layouts/kanban/default.tsx
View file

@ -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}

15
web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
View file

@ -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>
);