diff --git a/src/renderer/components/item-object-list/placeholder.module.scss b/src/renderer/components/item-object-list/placeholder.module.scss index 28b2a129d9..95ebc029fb 100644 --- a/src/renderer/components/item-object-list/placeholder.module.scss +++ b/src/renderer/components/item-object-list/placeholder.module.scss @@ -7,12 +7,25 @@ display: flex; padding: 0 var(--padding); - div { + > div { flex: 1 0; - padding: var(--padding); + padding: 20px var(--padding); + display: flex; + align-items: flex-start; + align-content: space-between; + flex-direction: column; + gap: 24px; &.actionColumn { flex: 0 0 55px; } } } + +.line { + width: 100%; + height: 0px; + padding: 3px; + border-radius: 4px; + background-color: var(--colorVague); +} diff --git a/src/renderer/components/item-object-list/placeholder.tsx b/src/renderer/components/item-object-list/placeholder.tsx index 452523f9a7..0dbeb62c80 100644 --- a/src/renderer/components/item-object-list/placeholder.tsx +++ b/src/renderer/components/item-object-list/placeholder.tsx @@ -14,15 +14,31 @@ interface Props { } export function Placeholder({ renderTableHeader, showExtraColumn = true }: Props) { + const linesNumber = 3; + + function renderLines() { + const lines: React.ReactNode[] = []; + + for (let i = 0; i < linesNumber; i++) { + lines.push( +
, + ); + } + + return React.Children.toArray(lines); + } + return (
{renderTableHeader.map((cellProps) => { return ( -
line
+
+ {renderLines()} +
); })} {showExtraColumn && ( -
line
+
{renderLines()}
)}
);