Show an inline loader in the executions timeline while paginating

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

Author: mihaelabalutoiu

src/components/modules/TransferModule/Executions/Executions.tsx

@@ -87,6 +87,7 @@ type Props = {
   executions: Execution[];
   executionsTasks: ExecutionTasks[];
   loading: boolean;
+  paginationLoading?: boolean;
   tasksLoading: boolean;
   instancesDetails: Instance[];
   hasOlderExecutions?: boolean;
@@ -322,6 +323,7 @@ class Executions extends React.Component<Props, State> {
         items={this.props.executions}
         selectedItem={this.state.selectedExecution}
         hasOlderItems={this.props.hasOlderExecutions}
+        loading={this.props.paginationLoading}
         onPreviousClick={() => {
           this.handlePreviousExecutionClick();
         }}

src/components/modules/TransferModule/Timeline/Timeline.tsx

@@ -40,6 +40,11 @@ const Wrapper = styled.div<any>`
     opacity: 1;
   }
 `;
+const LoadingIcon = styled(StatusIcon)`
+  position: absolute;
+  top: 0;
+  left: -19px;
+`;
 const MainLine = styled.div<any>`
   width: 100%;
   padding-top: 7px;
@@ -85,6 +90,7 @@ type Props = {
   items?: Execution[] | null;
   selectedItem?: Execution | null;
   hasOlderItems?: boolean;
+  loading?: boolean;
   onPreviousClick?: () => void;
   onNextClick?: () => void;
   onItemClick?: (item: Execution) => void;
@@ -215,16 +221,20 @@ class Timeline extends React.Component<Props> {
           this.wrapperRef = w;
         }}
       >
-        <ArrowStyled
-          orientation="left"
-          forceShow={
-            !this.props.items ||
-            !this.props.items.length ||
-            this.props.hasOlderItems
-          }
-          primary={Boolean(this.props.items && this.props.items.length)}
-          onClick={this.props.onPreviousClick}
-        />
+        {this.props.loading ? (
+          <LoadingIcon status="RUNNING" />
+        ) : (
+          <ArrowStyled
+            orientation="left"
+            forceShow={
+              !this.props.items ||
+              !this.props.items.length ||
+              this.props.hasOlderItems
+            }
+            primary={Boolean(this.props.items && this.props.items.length)}
+            onClick={this.props.onPreviousClick}
+          />
+        )}
         {this.renderMainLine()}
         {this.renderItems()}
         <ArrowStyled

src/components/modules/TransferModule/TransferDetailsContent/TransferDetailsContent.tsx

@@ -89,6 +89,7 @@ type Props = {
   detailsLoading: boolean;
   executions: Execution[];
   executionsLoading: boolean;
+  executionsPaginationLoading?: boolean;
   executionsTasksLoading: boolean;
   executionsTasks: ExecutionTasks[];
   minionPools: MinionPool[];
@@ -211,6 +212,7 @@ class TransferDetailsContent extends React.Component<Props, State> {
         onDeleteExecutionClick={this.props.onDeleteExecutionClick}
         onExecuteClick={this.props.onExecuteClick}
         loading={this.props.executionsLoading || this.props.detailsLoading}
+        paginationLoading={this.props.executionsPaginationLoading}
         onChange={this.props.onExecutionChange}
         tasksLoading={this.props.executionsTasksLoading}
         instancesDetails={this.props.instancesDetails}

src/components/smart/TransferDetailsPage/TransferDetailsPage.tsx

@@ -866,6 +866,9 @@ class TransferDetailsPage extends React.Component<Props, State> {
                 this.handleExecutionChange(id);
               }}
               executions={transferStore.executionsList}
+              executionsPaginationLoading={
+                transferStore.executionsPaginationLoading
+              }
               hasOlderExecutions={transferStore.executionsHasOlderPage}
               onLoadOlderExecutions={() => {
                 transferStore.loadOlderExecutions();

src/stores/TransferStore.ts

@@ -88,6 +88,8 @@ class TransferStore {
 
   @observable executionsLoading = false;
 
+  @observable executionsPaginationLoading = false;
+
   executionsPageSize = 10;
 
   @action resetTransferPagination(): void {
@@ -100,6 +102,7 @@ class TransferStore {
     this.executionsList = [];
     this.executionsHasOlderPage = false;
     this.executionsLoading = false;
+    this.executionsPaginationLoading = false;
   }
 
   @action async getTransferExecutions(options?: {
@@ -136,7 +139,12 @@ class TransferStore {
 
   @action async loadOlderExecutions(): Promise<void> {
     const transferId = this.transferDetails?.id;
-    if (!transferId || !this.executionsHasOlderPage || this.executionsLoading) {
+    if (
+      !transferId ||
+      !this.executionsHasOlderPage ||
+      this.executionsLoading ||
+      this.executionsPaginationLoading
+    ) {
       return;
     }
 
@@ -145,7 +153,7 @@ class TransferStore {
       return;
     }
 
-    this.executionsLoading = true;
+    this.executionsPaginationLoading = true;
 
     try {
       const raw = await TransferSource.getExecutions(transferId, {
@@ -158,12 +166,12 @@ class TransferStore {
       runInAction(() => {
         this.executionsList = [...raw, ...this.executionsList];
         this.executionsHasOlderPage = hasOlderPage;
-        this.executionsLoading = false;
+        this.executionsPaginationLoading = false;
       });
     } catch (err) {
       runInAction(() => {
         this.executionsHasOlderPage = false;
-        this.executionsLoading = false;
+        this.executionsPaginationLoading = false;
       });
       console.error(err);
     }