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 ignoreHeader
cardHeight={approximateCardHeight} cardHeight={approximateCardHeight}
cardsInColumn={issueLength !== undefined && issueLength < 3 ? issueLength : 3} cardsInColumn={issueLength !== undefined && issueLength < 3 ? issueLength : 3}
shouldAnimate={false}
/> />
} }
defaultValue={groupIndex < 5 && subGroupIndex < 2} 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 { forwardRef } from "react";
import { cn } from "@plane/editor";
import { ContentWrapper } from "@plane/ui"; import { ContentWrapper } from "@plane/ui";
export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number }>( export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number; shouldAnimate?: boolean }>(
({ cardHeight = 100 }, ref) => ( ({ cardHeight = 100, shouldAnimate = true }, ref) => (
<span <span
ref={ref} 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` }} style={{ height: `${cardHeight}px` }}
/> />
) )
@ -15,22 +16,24 @@ export const KanbanColumnLoader = ({
cardsInColumn = 3, cardsInColumn = 3,
ignoreHeader = false, ignoreHeader = false,
cardHeight = 100, cardHeight = 100,
shouldAnimate = true,
}: { }: {
cardsInColumn?: number; cardsInColumn?: number;
ignoreHeader?: boolean; ignoreHeader?: boolean;
cardHeight?: number; cardHeight?: number;
shouldAnimate?: boolean;
}) => ( }) => (
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{!ignoreHeader && ( {!ignoreHeader && (
<div className="flex items-center justify-between h-9 w-80"> <div className="flex items-center justify-between h-9 w-80">
<div className="flex item-center gap-3"> <div className="flex item-center gap-3">
<span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" /> <span className={cn("h-6 w-6 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
<span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" /> <span className={cn("h-6 w-24 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
</div> </div>
</div> </div>
)} )}
{Array.from({ length: cardsInColumn }, (_, cardIndex) => ( {Array.from({ length: cardsInColumn }, (_, cardIndex) => (
<KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} /> <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
))} ))}
</div> </div>
); );