B4J Question [ABMATERIAL] Loading animation with background page image

[inakigarm]

When changing from page to page in a site, it's possible to define the loading animation type but I'd want that the animation displays on the old page "blurred".

I've open a feedback case ago -case 75- (now I'm trying to learn ABMaterial again, hope I've time) and the answer was to use page.SetShowLoaderWithOpacity(doShow as Boolean, Opacity as Double).

When trying to apply this solution, the background page when animation is loading remains empty and the opacity only applies on the animation image.

Did I misunderstand the solution or maybe I'm not aplying correctly?

Thanks

public Sub BuildPage()
    ' initialize the theme
    BuildTheme
  
    ' initialize this page using our theme
    page.InitializeWithTheme(Name, "/ws/" & ABMShared.AppName & "/" & Name, False, ABMShared.SessionMaxInactiveIntervalSeconds, theme)
    page.ShowLoader=True
    page.SetShowLoaderWithOpacity (True,0.4)  
    page.ShowLoaderType=ABM.LOADER_TYPE_MANUAL ' NEW
    page.SetLoaderDEVICESWITCH
End Sub

 

[alwaysbusy]

Does your ConnectPage() method end with:

...

page.Refresh ' IMPORTANT
   
' NEW, because we use ShowLoaderType=ABM.LOADER_TYPE_MANUAL
page.FinishedLoading 'IMPORTANT
   
page.RestoreNavigationBarPosition

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

 

[inakigarm]

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

 

[alwaysbusy]

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.

 

[mindful]

@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.

 

[inakigarm]

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)

 

[mindful]

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.

 

[jinyistudio]

Hi

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

 

[alwaysbusy]

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

example:

Sub LoadPivot()
   page.PauseDelayed(2000) ' if loading the pivot takes more than 2 seconds, show the animation, else don't
  
   Dim pivot As ABMPivotTable = page.Component("pivot")
   pivot.SetDocument("../pivots/OneTwo_Export2020.csv","Jaar", "Project naam", "Prijs,Aantal,Persoon code,Project code,Activiteit code")
  
   pivot.Refresh
End Sub

Sub pivot_Loaded(Success As Boolean)
   Log("loaded: " & Success)
   page.resume ' remove the animation, if present
   If Success = False Then
     myToastId = myToastId + 1  
     page.ShowToast("toast" & myToastId, "toastred", page.XTR("1134","There was an error loading the data in the pivot!"), 5000,False)
   End If
End Sub