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

[WEB-2316] chore: Kanban group virtualization (#5565)

Browse source 
* kanban group virtualization

* minor name change
This commit is contained in:
rahulramesha 2024-09-18 18:03:49 +05:30 • committed by GitHub
parent aec4162c22
commit 5e83da9ca1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 157 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,26 +1,46 @@
import { forwardRef } from "react";
import { ContentWrapper } from "@plane/ui";
export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) => (
<span ref={ref} className="block h-28 animate-pulse bg-custom-background-80 rounded" />
));
export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number }>(
({ cardHeight = 100 }, ref) => (
<span
ref={ref}
className={`block animate-pulse bg-custom-background-80 rounded`}
style={{ height: `${cardHeight}px` }}
/>
)
);
export const KanbanColumnLoader = ({
cardsInColumn = 3,
ignoreHeader = false,
cardHeight = 100,
}: {
cardsInColumn?: number;
ignoreHeader?: boolean;
cardHeight?: number;
}) => (
<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" />
</div>
</div>
)}
{Array.from({ length: cardsInColumn }, (_, cardIndex) => (
<KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} />
))}
</div>
);
KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) => (
<ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
{cardsInEachColumn.map((cardsInColumn, columnIndex) => (
<div key={columnIndex} className="flex flex-col gap-3">
<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" />
</div>
</div>
{Array.from({ length: cardsInColumn }, (_, cardIndex) => (
<KanbanIssueBlockLoader key={cardIndex} />
))}
</div>
<KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
))}
</ContentWrapper>
);