Delayed page loading

[PA]

Hello,

My app grabs data from a remote API. I would like to run the page transition AFTER the data has been fetched. How could I do that?

Currently, myNavigtor.pushPage(...) runs my page’s AngularJS controller AND displays the page.
So my app displays an empty page, while waiting for the API response for a little time, before real content is displayed.

I would like it to just run the controller, and let the controller trigger the page transition… is it even possible?

Thank you.

[munsterlander]

@PA Utilize synchronous calls. So basically, in your call for the next page, prior to actually loading the page, call for your data. You can utilize a promise or a callback function to then call for the page to be loaded at which time you will pass your data.

[Fran Diox]

@PA I don’t think that approach is recommendable. Maybe you should put your API calls in an Angular service and make sure it grabs the data before you push a page. The controller of your page would just need to access the service.

[PA]

I will try to better explain how things currently work in my app.

First myNavigtor.pushPage('page.html') gets page.html, which contains <ons-page ng-controller="pageController">. And pageController looks like this:

app.controller('pageController', ['page', function(page) {
    $scope.data = page.get('products');
}

So first the page is shown, then the controller is called, and the user has to wait with a blank page while the data is being fetched.

I would prefer the page to be shown after the data has been fetched. Is there a way to run my controller before the view is shown, and trigger the display ?

@Fran-Diox if I get it right, the approach you suggest is to pre-fetch data. That could help to prevent the user to have to wait, but it’s not what I am trying to achieve and it doen’t fit my use case: we display a list of posts, you tap one and you get the details… pre-fetching all articles details would require too much networking.

[Fran Diox]

@PA I’m not telling you to prefetch all the data, just the data you need right before you display it.
Basically the only thing you need to do is to call your Angular service that fetchs the data right when the user clicks on the item. When that service finishes, then and only then you call pushPage. That would obviously wait until you get the data and then display the page. The controller of this new page would access to the data service.

Otherwise, you can simply show a placeholder/loader gif in the new page and hide it when the data is ready.

[PA]

@Fran-Diox ok I see what you meant. Thank you.

Now, this means I will have to re-architect some things!