From baa32dfaa21e21cb24e6d4f3c0410f442c4f67ed Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 18 Feb 2022 12:40:11 +0300
Subject: [PATCH] Introduce Placeholder table component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+catalog/catalog.module.scss   |  2 +-
 src/renderer/components/+catalog/catalog.tsx  |  1 +
 .../components/item-object-list/content.tsx   |  6 ++++
 .../item-object-list/list-layout.tsx          |  2 ++
 .../item-object-list/placeholder.module.scss  | 18 ++++++++++++
 .../item-object-list/placeholder.tsx          | 29 +++++++++++++++++++
 6 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/item-object-list/placeholder.module.scss
 create mode 100644 src/renderer/components/item-object-list/placeholder.tsx

diff --git a/src/renderer/components/+catalog/catalog.module.scss b/src/renderer/components/+catalog/catalog.module.scss
index e285fb3ced..fc7d330b99 100644
--- a/src/renderer/components/+catalog/catalog.module.scss
+++ b/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 {
diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index 0287925e32..8a611d4990 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/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(),
         })}
diff --git a/src/renderer/components/item-object-list/content.tsx b/src/renderer/components/item-object-list/content.tsx
index 8877f04e02..654a928786 100644
--- a/src/renderer/components/item-object-list/content.tsx
+++ b/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 />;
   }
 
diff --git a/src/renderer/components/item-object-list/list-layout.tsx b/src/renderer/components/item-object-list/list-layout.tsx
index 9af91fc755..56e9e4af06 100644
--- a/src/renderer/components/item-object-list/list-layout.tsx
+++ b/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)}
diff --git a/src/renderer/components/item-object-list/placeholder.module.scss b/src/renderer/components/item-object-list/placeholder.module.scss
new file mode 100644
index 0000000000..28b2a129d9
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/renderer/components/item-object-list/placeholder.tsx b/src/renderer/components/item-object-list/placeholder.tsx
new file mode 100644
index 0000000000..452523f9a7
--- /dev/null
+++ b/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>
+  );
+}