B4J Question [ABMATERIAL] Loading animation with background page image

Does your ConnectPage() method end with:


If yes, is it reproducable in the Template project? (If possible, upload/mail it to me) so I can debug it.

I've used the demo site ABMaterial; on some pages (Ex: CompChipPage, CompComboPage ) I've made a test including (only) page.SetS
howLoaderWithOpacity (True,0.4) on BuildPage (see first post). The connectPage method on this classes includes the code you posted.

See picture (when selecting ABMCombo opacity works opacity only on loading animation, the "old" page doesn't appear, only a white background)

Edit: ABMaterial 3.50 and BJ5.51

I've checked this. As stated, leaving the old page and loading a new one will never work (and has never worked). The trick we did was before ABMaterial had dynamic pages and everything was written in the BuildPage() instead of in the ConnectPage(). This had as an effect (and only with the default loader) that the 'spinning circles' were transparent while the new page was loaded (read the html file was fetched from the server, containing all the objects you've put in the BuildPage()).

But as now in BuildPage() there is nothing, as it is all in ConnectPage(), you do indeed see an empty page. But that is just why we show a 'loader animation', so the user sees there is something going on. When the page is fully loaded (and ConnectPage() did run), the 'loader animation' dissapears and and the content of the page is shown. So the 'trick' does not apply anymore.

Sorry, but there is nothing more I can do. Having dynamic pages heavely outweights the 'loading' effect.

@inakigarm you can setup your project as a one page app(only one page where you do everything) and use page.Pause and page.Resume while you switch content, this way you will get the desired effect. But when using multiple pages you cannot do this because the browser is redirected to another address and needs to load/reload that page specific resources.

Thanks for the answers; at this time, I've not the knowledge to find/apply this workaround; looking for an answer to the desired behaviour, I've find this interesting article (out of my technical scope ;-( ) https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/

All that I wanted was bring closer user's experience to a native app (no empty backgrounds between pages/activitys-forms)

ABMaterial uses websockets so to load the data that you wrote in ConnectPage sub you need to have an active websocket connection between the browser and the server. So using the info from the article above I belive is not going to work with ABMaterial only if you use only static pages (all the content should be created in BuildPage). So to get the desired efect you need to create a Single Page Web Application where you create all your app content in one page and programmatically switch which components are visible to the browser or with ABMaterial you can create components, grids and containers at runtime so you lets say the user is on the entry page of your app which represents a dashboard and clicks a button to go to settings page so you will need use page.Pause, remove the dashboard container, create and add the settings container and call page.Resume. So if you haven't started your project yet and you really want the transition effect to be as smooth as possible you need to go with this solution and create a Single Page Web App.

Hi

After loading page. Could i show the loader when i query some large data and wait it show to page ?

@jinyistudio You can use page.pause (or page.pausedelayed) before the time consuming method and page.resume when it is finished.

example: