[ARVADOS-WORKBENCH2] created: 2.4.0-9-g20acf4ed
Git user
git at public.arvados.org
Fri Apr 8 19:59:54 UTC 2022
at 20acf4ed80f85a315cc21b555a6101fac95f8532 (commit)
commit 20acf4ed80f85a315cc21b555a6101fac95f8532
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Apr 8 16:58:05 2022 -0300
18972: Avoids data table flickering when reloading data on the same route.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e8a6ce69..14dfdaca 100644
--- 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 900ab94e..8db551e8 100644
--- 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);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list