Showing progress bar on page load in WebixJet

Hello Everyone,

Is there anyway to show a progress bar icon on top of the page while the sub views are being loaded(on url change) and hide it after the subview has been loaded completely?

for instance if i have an app that has these 2 urls: /app/page1 and /app/page2
I want to show a progress bar on top of the page (TopParentView) while i’m navigating from /app/page1 to /app/page2.

Thank you in advance.

Hello,

You can use something like

var top = this.getTopParentView();
webix.extend(top, webix.ProgressBar);
top.showProgress();

It can be executed from context of any view. Code will locate the topmost Webix view and will show a progressbar for it.

Thank you @Listopad

Is there any event that represents the page before loading and loaded state in webixJet that i can use to hide and who progress bar?

as far as i know there is $oninit and $onurlchange which are not suitable for this scenario.

> while i’m navigating from /app/page1 to /app/page2

AFAICS both $oninit and $onurlchange are suitable for showing the progress bar:

$oninit:function(view){
     var top = view.getTopParentView();
     /* the same as above */
}

Afterwards, you can hide it when the precise inner view was rendered/loaded (i.e. hideProgress within the corresponding event handler, such as datatable’s onAfterLoad ).