How to open a new page without fully loaded

I needed to load two data sources for a page. However, one data source is taking a long time(like 15 seconds to loaded) before open a page.

How to make it open a page just after one of the lighter data (load faster) is loaded?

This is my code

  $scope.openDetail = function (stock) {
    console.log(stock.symbol);
    $ionicLoading.show();

    //stockCondition
    if(stock.symbol.length<=$scope.stockCondition) {
      $stockDataFactory.getStockDetails(stock).then(
        function success(data) {
          $globalFactory.personalStockData = data.details;
          $globalFactory.personalStockNews = data.news;
          $ionicLoading.hide();
          $state.go("app.pStock");
        },
        function error(error) {
          alert(error.message);
          console.error(error);
          $ionicLoading.hide();
        }
      );

I want to open app.pStock page after data.details fully loaded, so it will save me 10 s to open a page.
I try to move ionicLoading.hide() up,it just hide the spinner early but still wait 15s to open a page.

  1. Remove the Load data functionality from openDetail function
  2. Just keep $state.go(“app.pStock”);
  3. In pStock page controller Add functionality of load data / fetch data
  4. If it is possible try to fetch details and news separately so that which ever comes first will get displayed

using this approach you can solve your problem.

Hi

I am lost of what you mean in no 1.
Could you made cahnges on my code above so that have clearer picture

Remove
$globalFactory.personalStockData = data.details;
$globalFactory.personalStockNews = data.news;

from your original code is what I mean to say in point no 1

isn’t it remove that, I will unable to get the data?

use those code in step no 3

In pStock page controller Add functionality of load data / fetch data

I am not sure if I understand correctly.
let’s said $globalFactory.personalStockData = data.details; loaded in 2s and $globalFactory.personalStockNews = data.news;loaded in 10s.

To make the process faster to reach the new page.

I can go to app.pStock page without loading any data or loaded $globalFactory.personalStockData = data.details; which takes 2s.
Then go to the app.pStock page and start loading $globalFactory.personalStockNews = data.news; that takes a long time to load.

is this the concept correct?

Yes, with this approach your new page will be available to user and the data that is already loaded is visible to user

will it freeze the screen until globalFactory.personalStockNews = data.news; finish loaded or the user can scroll the screen although $globalFactory.personalStockNews = data.news; still loading?

Nop the ajx call runs in background so no issue of freezing the screen