Introduce Placeholder table component

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

src/renderer/components/+catalog/catalog.module.scss

@@ -19,7 +19,7 @@
   align-items: center;
   padding: 0 var(--padding);
   padding-bottom: 0;
-  padding-right: 24px; // + reserved space for .pinIcon
+  padding-right: 24px!important; // reserved space for .pinIcon
   flex-grow: 2.5!important;
 
   > span {

src/renderer/components/+catalog/catalog.tsx

@@ -263,6 +263,7 @@ class NonInjectedCatalog extends React.Component<Props & Dependencies> {
         isConfigurable={true}
         store={catalogEntityStore}
         getItems={() => catalogEntityStore.entities}
+        showEmptyTablePlaceholder
         customizeTableRowProps={entity => ({
           disabled: !entity.isEnabled(),
         })}

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

@@ -21,6 +21,7 @@ import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Checkbox } from "../checkbox";
 import { UserStore } from "../../../common/user-store";
+import { Placeholder } from "./placeholder";
 
 interface ItemListLayoutContentProps<I extends ItemObject> {
   getFilters: () => Filter[]
@@ -40,6 +41,7 @@ interface ItemListLayoutContentProps<I extends ItemObject> {
   customizeTableRowProps?: (item: I) => Partial<TableRowProps>;
   addRemoveButtons?: Partial<AddRemoveButtonsProps>;
   virtual?: boolean;
+  showEmptyTablePlaceholder?: boolean; // show fading lines down the header
 
   // item details view
   hasDetailsView?: boolean;
@@ -185,6 +187,10 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
       );
     }
 
+    if (this.props.showEmptyTablePlaceholder && this.props.renderTableHeader) {
+      return <Placeholder renderTableHeader={this.props.renderTableHeader}/>;
+    }
+
     return <NoItems />;
   }
 

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

@@ -78,6 +78,7 @@ export interface ItemListLayoutProps<I extends ItemObject> {
   // other
   customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>;
   renderFooter?: (parent: NonInjectedItemListLayout<I>) => React.ReactNode;
+  showEmptyTablePlaceholder?: boolean;
 
   /**
    * Message to display when a store failed to load
@@ -264,6 +265,7 @@ class NonInjectedItemListLayout<I extends ItemObject> extends React.Component<It
           onDetails={this.props.onDetails}
           customizeRemoveDialog={this.props.customizeRemoveDialog}
           failedToLoadMessage={this.props.failedToLoadMessage}
+          showEmptyTablePlaceholder={this.props.showEmptyTablePlaceholder}
         />
 
         {this.props.renderFooter?.(this)}

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.placeholder {
+  display: flex;
+  padding: 0 var(--padding);
+
+  div {
+    flex: 1 0;
+    padding: var(--padding);
+
+    &.actionColumn {
+      flex: 0 0 55px;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./placeholder.module.scss";
+
+import React from "react";
+import type { TableCellProps } from "../table";
+
+interface Props {
+  renderTableHeader: TableCellProps[];
+  showExtraColumn?: boolean;
+}
+
+export function Placeholder({ renderTableHeader, showExtraColumn = true }: Props) {
+  return (
+    <div className={styles.placeholder}>
+      {renderTableHeader.map((cellProps) => {
+        return (
+          <div key={cellProps.id} className={cellProps.className}>line</div>
+        );
+      })}
+      {showExtraColumn && (
+        <div className={styles.actionColumn}>line</div>
+      )}
+    </div>
+  );
+}