Merge branch 'main' into 21461-excessive-scrollbars-fix

[arvados.git] / services / workbench2 / src / components / data-table / data-table.tsx

diff --git a/services/workbench2/src/components/data-table/data-table.tsx b/services/workbench2/src/components/data-table/data-table.tsx
index 29ee94f1e75ce2a9d5349aedfad2178231c3ed9a..7b787994577305ea5725b80fcfd942d42f34f360 100644 (file)
--- a/services/workbench2/src/components/data-table/data-table.tsx
+++ b/services/workbench2/src/components/data-table/data-table.tsx
@@ -29,6 +29,7 @@ import { SvgIconProps } from "@material-ui/core/SvgIcon";
 import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
 import { createTree } from "models/tree";
 import { DataTableMultiselectOption } from "../data-table-multiselect-popover/data-table-multiselect-popover";
+import { PendingIcon } from "components/icon/icon";
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
@@ -171,6 +172,9 @@ export const DataTable = withStyles(styles)(
             if(prevProps.working === true && this.props.working === false) {
                 this.setState({ isLoaded: true });
             }
+            if((this.props.items.length > 0) && !this.state.isLoaded) {
+                this.setState({ isLoaded: true });
+            }
         }
 
         componentWillUnmount(): void {
@@ -312,25 +316,25 @@ export const DataTable = withStyles(styles)(
 
         renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
             const { isLoaded } = this.state;
-            const { working, items, isNotFound } = this.props;
+            const { working, isNotFound } = this.props;
             const dirty = columns.some(column => getTreeDirty("")(column.filters));
             if (isNotFound && isLoaded) {
                 return (
                     <DataTableDefaultView 
                         icon={this.props.defaultViewIcon} 
-                        messages={["Item not found"]} 
+                        messages={["No items found"]} 
                     />
                 );
             } else 
             if (isLoaded === false || working === true) {
                 return (
                     <DataTableDefaultView 
-                        icon={this.props.defaultViewIcon} 
+                        icon={PendingIcon} 
                         messages={["Loading data, please wait"]} 
                     />
                 );
             } else {
-                //if (isLoaded && !working && !isNotFound)
+                // isLoaded && !working && !isNotFound
                 return (
                     <DataTableDefaultView
                         icon={this.props.defaultViewIcon}