Styling faded lines

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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);
+}

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(
+        <div className={styles.line} style={{ opacity: 1 - i * .33 }}></div>,
+      );
+    }
+
+    return React.Children.toArray(lines);
+  }
+
   return (
     <div className={styles.placeholder}>
       {renderTableHeader.map((cellProps) => {
         return (
-          <div key={cellProps.id} className={cellProps.className}>line</div>
+          <div key={cellProps.id} className={cellProps.className}>
+            {renderLines()}
+          </div>
         );
       })}
       {showExtraColumn && (
-        <div className={styles.actionColumn}>line</div>
+        <div className={styles.actionColumn}>{renderLines()}</div>
       )}
     </div>
   );