Use empty placeholder for all generic tables

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

src/renderer/components/item-object-list/content.tsx

@@ -201,7 +201,7 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
     if (this.props.showEmptyTablePlaceholder && this.props.renderTableHeader && this.props.tableId) {
       return (
         <>
-          <Placeholder renderTableHeader={this.props.renderTableHeader} tableId={this.props.tableId}/>
+          <Placeholder renderTableHeader={this.props.renderTableHeader} tableId={this.props.tableId} showCheckColumn={this.props.isSelectable}/>
           <div className="noItemsHolder">
             <NoItems>{this.props.noItemsMessage}</NoItems>
           </div>

src/renderer/components/item-object-list/item-list-layout.scss

@@ -38,6 +38,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    pointer-events: none;
   }
 }
 

src/renderer/components/item-object-list/list-layout.tsx

@@ -106,6 +106,7 @@ const defaultProps: Partial<ItemListLayoutProps<ItemObject>> = {
   virtual: true,
   customizeTableRowProps: () => ({}),
   failedToLoadMessage: "Failed to load items",
+  showEmptyTablePlaceholder: true,
 };
 
 interface Dependencies {

src/renderer/components/item-object-list/placeholder.module.scss

@@ -9,7 +9,10 @@
 
   > div {
     flex: 1 0;
-    padding: 20px var(--padding);
+    padding-top: 20px!important;
+    padding-right: var(--padding);
+    padding-bottom: 20px;
+    padding-left: var(--padding);
     display: flex;
     align-items: flex-start;
     align-content: space-between;
@@ -23,6 +26,10 @@
         width: 100%;
       }
     }
+
+    &.checkerColumn {
+      flex: 0 0 32px;
+    }
   }
 }
 

src/renderer/components/item-object-list/placeholder.tsx

@@ -6,16 +6,17 @@
 import styles from "./placeholder.module.scss";
 
 import React from "react";
-import type { TableCellProps } from "../table";
+import { TableCell, TableCellProps } from "../table";
 import { UserStore } from "../../../common/user-store";
 
 interface Props {
   renderTableHeader: TableCellProps[];
-  showExtraColumn?: boolean;
+  showActionsColumn?: boolean;
+  showCheckColumn?: boolean;
   tableId: string;
 }
 
-export function Placeholder({ renderTableHeader, showExtraColumn = true, tableId }: Props) {
+export function Placeholder({ renderTableHeader, showActionsColumn: showExtraColumn = true, showCheckColumn, tableId }: Props) {
   const linesNumber = 3;
 
   function renderLines() {
@@ -23,7 +24,7 @@ export function Placeholder({ renderTableHeader, showExtraColumn = true, tableId
 
     for (let i = 0; i < linesNumber; i++) {
       lines.push(
-        <div className={styles.line} style={{ opacity: 1 - i * .33 }}></div>,
+        <div className={styles.line} style={{ opacity: 1 - i * .4 }}></div>,
       );
     }
 
@@ -38,11 +39,14 @@ export function Placeholder({ renderTableHeader, showExtraColumn = true, tableId
 
   return (
     <div className={styles.placeholder} aria-hidden="true">
-      {filteredColumns.map((cellProps) => {
+      {showCheckColumn && (
+        <div className={styles.checkerColumn}>{renderLines()}</div>
+      )}
+      {filteredColumns.map((cellProps, index) => {
         return (
-          <div key={cellProps.id} className={cellProps.className}>
-            {renderLines()}
-          </div>
+          <TableCell key={cellProps.id ?? index} className={cellProps.className}>
+            {cellProps.title && renderLines()}
+          </TableCell>
         );
       })}
       {showExtraColumn && (