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 index cee5bbe4834..eab77c0f838 100644 --- 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 => { 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 index 12bf0fe246e..2b08e1b6f2d 100644 --- 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'); + } } }; }