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

[arvados-workbench2.git] / src / views-components / data-explorer / data-explorer.tsx

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);