Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-02-24 04:00:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5884] chore: layout loader enhancements #8500

Browse Source
This commit is contained in:
Anmol Singh Bhatia
2026-02-13 18:49:53 +05:30
committed by GitHub
parent d497304de5
commit 7607cc9b10
6 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
View File

@@ -44,7 +44,9 @@ const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader(
props: Record<string, unknown>,
ref: React.ForwardedRef<HTMLSpanElement>
) {
return <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-layer-1 rounded-sm" />;
return (
<span ref={ref} className="block h-28 m-1.5 animate-pulse bg-[var(--illustration-fill-quaternary)] rounded-sm" />
);
});
KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
@@ -119,7 +121,17 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
scrollableContainerRef={scrollableContainerRef}
/>
{shouldLoadMore && (isSubGroup ? <>{loadMore}</> : <KanbanIssueBlockLoader ref={setIntersectionElement} />)}
{shouldLoadMore &&
(isSubGroup ? (
<>{loadMore}</>
) : (
<div className="flex flex-col gap-2">
{Array.from({ length: 2 }).map((_, index) => (
<KanbanIssueBlockLoader key={index} />
))}
<KanbanIssueBlockLoader ref={setIntersectionElement} />
</div>
))}
</div>
);
});

12
apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
View File

@@ -311,7 +311,17 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
isEpic={isEpic}
/>
{shouldLoadMore && (isSubGroup ? <>{loadMore}</> : <KanbanIssueBlockLoader ref={setIntersectionElement} />)}
{shouldLoadMore &&
(isSubGroup ? (
<>{loadMore}</>
) : (
<div className="flex flex-col gap-2">
{Array.from({ length: 2 }).map((_, index) => (
<KanbanIssueBlockLoader key={index} />
))}
<KanbanIssueBlockLoader ref={setIntersectionElement} />
</div>
))}
{enableQuickIssueCreate &&
!disableIssueCreation &&

12
apps/web/core/components/issues/issue-layouts/list/list-group.tsx
View File

@@ -312,7 +312,17 @@ export const ListGroup = observer(function ListGroup(props: Props) {
/>
)}
{shouldLoadMore && (group_by ? <>{loadMore}</> : <ListLoaderItemRow ref={setIntersectionElement} />)}
{shouldLoadMore &&
(group_by ? (
<>{loadMore}</>
) : (
<>
{Array.from({ length: 2 }).map((_, index) => (
<ListLoaderItemRow key={index} />
))}
<ListLoaderItemRow ref={setIntersectionElement} />
</>
))}
{enableIssueQuickAdd &&
!disableIssueCreation &&

4
apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
View File

@@ -144,7 +144,9 @@ export const SpreadsheetTable = observer(function SpreadsheetTable(props: Props)
</tbody>
{canLoadMoreIssues && (
<tfoot ref={setIntersectionElement}>
<SpreadsheetIssueRowLoader columnCount={displayPropertiesCount} />
{Array.from({ length: 3 }).map((_, index) => (
<SpreadsheetIssueRowLoader key={index} columnCount={displayPropertiesCount} />
))}
</tfoot>
)}
</table>

2
apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
View File

@@ -18,7 +18,7 @@ export const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader
return (
<span
ref={ref}
className={cn(`block bg-layer-1 rounded-sm`, { " animate-pulse": shouldAnimate })}
className={cn(`block bg-[var(--illustration-fill-secondary)] rounded-sm`, { " animate-pulse": shouldAnimate })}
style={{ height: `${cardHeight}px` }}
/>
);

21
apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
View File

@@ -23,23 +23,26 @@ export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
return (
<Row
ref={ref}
className={cn("flex items-center justify-between h-11 py-3 ", {
className={cn("flex items-center justify-between h-11 py-3", {
"bg-surface-1": renderForPlaceHolder,
"border-b border-subtle": !renderForPlaceHolder,
"border-t border-subtle": !renderForPlaceHolder,
})}
>
<div className="flex items-center gap-3">
<span
className={cn("h-5 w-10 bg-layer-1 rounded-sm", {
className={cn("h-5 w-10 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
"animate-pulse": shouldAnimate,
"bg-surface-2": renderForPlaceHolder,
})}
/>
<span
className={cn(`h-5 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`, {
"animate-pulse": shouldAnimate,
"bg-surface-2": renderForPlaceHolder,
})}
className={cn(
`h-5 w-${getRandomLength(["32", "52", "72"])} bg-[var(--illustration-fill-tertiary)] rounded-sm`,
{
"animate-pulse": shouldAnimate,
"bg-surface-2": renderForPlaceHolder,
}
)}
/>
</div>
<div className="flex items-center gap-2">
@@ -48,14 +51,14 @@ export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
{getRandomInt(1, 2) % 2 === 0 ? (
<span
key={index}
className={cn("h-5 w-5 bg-layer-1 rounded-sm", {
className={cn("h-5 w-5 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
"animate-pulse": shouldAnimate,
"bg-surface-2": renderForPlaceHolder,
})}
/>
) : (
<span
className={cn("h-5 w-16 bg-layer-1 rounded-sm", {
className={cn("h-5 w-16 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
"animate-pulse": shouldAnimate,
"bg-surface-2": renderForPlaceHolder,
})}