add loading indicator for export csv (#2962)

finos · Feb 27, 2024 · 506a09c · 506a09c
1 parent 261c7e6
commit 506a09c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/gold-donkeys-roll.md b/.changeset/gold-donkeys-roll.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+add loading indicator for export csv
diff --git a/packages/legend-query-builder/src/components/QueryBuilder.tsx b/packages/legend-query-builder/src/components/QueryBuilder.tsx
@@ -42,6 +42,7 @@ import {
   ModalFooterButton,
   CalendarClockIcon,
   ChatIcon,
+  PanelLoadingIndicator,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -376,6 +377,9 @@ export const QueryBuilder = observer(
           elementId={QUERY_BUILDER_COMPONENT_ELEMENT_ID.BACKDROP_CONTAINER}
         />
         <div className="query-builder__body">
+          <PanelLoadingIndicator
+            isLoading={queryBuilderState.resultState.exportState.isInProgress}
+          />
           <div className="query-builder__content">
             <div className="query-builder__header">
               <div className="query-builder__header__statuses">

diff --git a/packages/legend-query-builder/src/components/result/QueryBuilderResultPanel.tsx b/packages/legend-query-builder/src/components/result/QueryBuilderResultPanel.tsx
@@ -383,6 +383,11 @@ export const QueryBuilderResultPanel = observer(
             )}
           </div>
           <div className="panel__header__actions query-builder__result__header__actions">
+            {resultState.exportState.isInProgress && (
+              <div className="panel__header__title__label__status">
+                Exporting...
+              </div>
+            )}
             {allowSettingLocalMode && (
               <div className="query-builder__result__advanced__mode">
                 <div className="query-builder__result__advanced__mode__label">

diff --git a/packages/legend-query-builder/src/stores/QueryBuilderResultState.ts b/packages/legend-query-builder/src/stores/QueryBuilderResultState.ts
@@ -85,6 +85,7 @@ type QueryBuilderDataGridConfig = {
 export class QueryBuilderResultState {
   readonly queryBuilderState: QueryBuilderState;
   readonly executionPlanState: ExecutionPlanState;
+  readonly exportState = ActionState.create();
 
   previewLimit = DEFAULT_LIMIT;
   pressedRunQuery = ActionState.create();
@@ -228,6 +229,7 @@ export class QueryBuilderResultState {
 
   *exportData(format: string): GeneratorFn<void> {
     try {
+      this.exportState.inProgress();
       this.queryBuilderState.applicationStore.notificationService.notifySuccess(
         `Export ${format} will run in background`,
       );
@@ -275,6 +277,7 @@ export class QueryBuilderResultState {
             this.queryBuilderState.applicationStore.telemetryService,
             reportWithState,
           );
+          this.exportState.pass();
         })
         .catch((error) => {
           assertErrorThrown(error);
@@ -284,6 +287,7 @@ export class QueryBuilderResultState {
           );
         });
     } catch (error) {
+      this.exportState.fail();
       assertErrorThrown(error);
       this.queryBuilderState.applicationStore.logService.error(
         LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
@@ -292,6 +296,7 @@ export class QueryBuilderResultState {
       this.queryBuilderState.applicationStore.notificationService.notifyError(
         error,
       );
+      this.exportState.complete();
     }
   }