18972: Avoids data table flickering when reloading data on the same route.

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

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e8a6ce69aad0cd923f4e3c77d2385e5bb107f526..14dfdacaf9707acaba47283555edf80138750d16 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -86,7 +86,7 @@ type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
         render() {
-            const { items, classes } = this.props;
+            const { items, classes, working } = this.props;
             return <div className={classes.root}>
                 <div className={classes.content}>
                     <Table>
@@ -96,16 +96,16 @@ export const DataTable = withStyles(styles)(
                             </TableRow>
                         </TableHead>
                         <TableBody className={classes.tableBody}>
-                            { this.props.working !== undefined && !this.props.working && items.map(this.renderBodyRow) }
+                            { !working && items.map(this.renderBodyRow) }
                         </TableBody>
                     </Table>
-                    { this.props.working &&
+                    { !!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()}
+                    {items.length === 0 && !working && this.renderNoItemsPlaceholder()}
                 </div>
             </div>;
         }

diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index 900ab94e0cd00ee02e5566934ea95097feafaa73..8db551e8b48a75b300325a2e969e1ddd2e6e2406 100644 (file)
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -21,8 +21,9 @@ interface Props {
     working?: boolean;
 }
 
-let data: any[] = [];
-let href: string = '';
+let prevRoute = '';
+let routeChanged = false;
+let isWorking = false;
 
 const mapStateToProps = (state: RootState, { id }: Props) => {
     const progress = state.progressIndicator.find(p => p.id === id);
@@ -30,16 +31,20 @@ const mapStateToProps = (state: RootState, { id }: Props) => {
     const currentRoute = state.router.location ? state.router.location.pathname : '';
     const currentItemUuid = currentRoute === '/workflows' ? state.properties.workflowPanelDetailsUuid : state.detailsPanel.resourceUuid;
 
-    let loading = false;
-
-    if (dataExplorerState.items.length > 0 && data === dataExplorerState.items && href !== window.location.href) {
-        loading = true
-    } else {
-        href = window.location.href;
-        data = dataExplorerState.items;
+    if (currentRoute !== prevRoute) {
+        routeChanged = true;
+        prevRoute = currentRoute;
+    }
+    if (progress?.working) {
+        isWorking = true;
     }
 
-    const working = (progress && progress.working) || loading;
+    const working = routeChanged && isWorking;
+
+    if (working && !progress?.working) {
+        routeChanged = false;
+        isWorking = false;
+    }
 
     return { ...dataExplorerState, working, paperKey: currentRoute, currentItemUuid };
 };
@@ -86,5 +91,5 @@ const mapDispatchToProps = () => {
     });
 };
 
-export const DataExplorer = connect(mapStateToProps, mapDispatchToProps())(DataExplorerComponent);
+export const DataExplorer = connect(mapStateToProps, mapDispatchToProps)(DataExplorerComponent);