fix: loading indicator visible and isActive true while endpoint fetch

vaadin · Dec 7, 2020 · dc3f418 · dc3f418
1 parent 1991961
commit dc3f418
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/flow-client/src/main/resources/META-INF/resources/frontend/Connect.ts b/flow-client/src/main/resources/META-INF/resources/frontend/Connect.ts
@@ -353,7 +353,7 @@ export class ConnectClient {
       async(context: MiddlewareContext): Promise<Response> => {
         this.loading(true);
         try {
-          return fetch(context.request);
+          return await fetch(context.request);
         } finally {
           this.loading(false); 
         }

diff --git a/flow-client/src/main/resources/META-INF/resources/frontend/Flow.ts b/flow-client/src/main/resources/META-INF/resources/frontend/Flow.ts
@@ -60,8 +60,8 @@ export class Flow {
   // @ts-ignore
   container : HTMLRouterContainer;
 
-  // flag used to inform Testbench whether a server route is in progress
-  private isActive = false;
+  private isActiveCount = 0;
+
   private baseRegex = /^\//;
   private appShellTitle: string;
 
@@ -307,15 +307,18 @@ export class Flow {
     });
   }
 
+  // flag used to inform Testbench whether a server route is in progress
+  get isActive(): boolean {
+    return this.isActiveCount > 0;
+  }
+
   private showLoading() {
     // Make Testbench know that server request is in progress
-    this.isActive = true;
     $wnd.Vaadin.Flow.loading(true);
   }
 
   private hideLoading() {
     // Make Testbench know that server request has finished
-    this.isActive = false;
     $wnd.Vaadin.Flow.loading(false);
   }
 
@@ -385,16 +388,21 @@ export class Flow {
     let timeout2nd: any;
     let timeout3rd: any;
     $wnd.Vaadin.Flow.loading = (action: boolean) => {
-      clearTimeout(timeout2nd);
-      clearTimeout(timeout3rd);
-      loading.classList.remove('second');
-      loading.classList.remove('third');
-      if (action) {
-        loading.removeAttribute('style');
-        timeout2nd = setTimeout(() => loading.classList.add('second'), 1500);
-        timeout3rd = setTimeout(() => loading.classList.add('third'), 5000);
-      } else {
-        loading.setAttribute('style', 'none');
+      const show = action && this.isActiveCount === 0;
+      const hide = !action && this.isActiveCount === 1;
+      this.isActiveCount = Math.max(0, this.isActiveCount + (action ? 1 : -1));
+      if (show || hide) {
+        clearTimeout(timeout2nd);
+        clearTimeout(timeout3rd);
+        loading.classList.remove('second');
+        loading.classList.remove('third');
+        if (show) {
+          loading.removeAttribute('style');
+          timeout2nd = setTimeout(() => loading.classList.add('second'), 1500);
+          timeout3rd = setTimeout(() => loading.classList.add('third'), 5000);
+        } else {
+          loading.setAttribute('style', 'none');
+        }
       }
     };
   }