From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 3 Feb 2022 16:16:09 +0000 (-0300)
Subject: 18661: Fixes the '<div> cannot appear as a child of <tbody>' error.
X-Git-Tag: 2.4.0~13^2~3
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/606119d81b87f4e5e835c777b012f56e7d5c146d

18661: Fixes the '<div> cannot appear as a child of <tbody>' error.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---

diff --git a/src/components/data-table/data-table.test.tsx b/src/components/data-table/data-table.test.tsx
index 85379e9a..866564ac 100644
--- a/src/components/data-table/data-table.test.tsx
+++ b/src/components/data-table/data-table.test.tsx
@@ -101,6 +101,7 @@ describe("<DataTable />", () => {
         ];
         const dataTable = mount(<DataTable
             columns={columns}
+            working={false}
             items={["item 1"]}
             onFiltersChange={jest.fn()}
             onRowClick={jest.fn()}
@@ -128,6 +129,7 @@ describe("<DataTable />", () => {
         ];
         const dataTable = mount(<DataTable
             columns={columns}
+            working={false}
             items={["item 1"]}
             onFiltersChange={jest.fn()}
             onRowClick={jest.fn()}
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 2119e53d..e8a6ce69 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -96,16 +96,15 @@ export const DataTable = withStyles(styles)(
                             </TableRow>
                         </TableHead>
                         <TableBody className={classes.tableBody}>
-                            {
-                                this.props.working ?
-                                <div className={classes.loader}>
-                                    <DataTableDefaultView
-                                        icon={PendingIcon}
-                                        messages={['Loading data, please wait.']} />
-                                </div> : items.map(this.renderBodyRow)
-                            }
+                            { this.props.working !== undefined && !this.props.working && items.map(this.renderBodyRow) }
                         </TableBody>
                     </Table>
+                    { this.props.working &&
+                        <div className={classes.loader}>
+                            <DataTableDefaultView
+                                icon={PendingIcon}
+                                messages={['Loading data, please wait.']} />
+                        </div> }
                     {items.length === 0 && this.props.working !== undefined && !this.props.working && this.renderNoItemsPlaceholder()}
                 </div>
             </div>;