Data resolve and view render issue

My app loads data from remote server and render it in view. I have done this by resolving a http request in state which pass the data to controller when resolved. Everything loads perfectly this way. However, ionic waits for the data before it renders the transition and view. This is not a good way in terms of UX. If I want to show the transition and loading screen first, and render the view when the data is ready. How can I change my code to do that?

Should I remove the resolve part from state and put it into my controller?
I am not quite sure what’s the best practice to deal with this as these state / ui-router / resolve are new to me. Appreciate if anyone could suggest a better solution for this issue.

Below are my current codes.

Service

app.service('productsService', function($q,$http) {
    return {
        getProducts : function() {
            var dfd = $q.defer();
            $http.get(ctrl_url + 'get_products').
                success(function(result) {
                    dfd.resolve(result);
                });
            return dfd.promise;
        }
    }
});

Controller

app.controller("ProductListingCtrl", function(products){
    this.products = products;  
});

State

   app.state('tabs.home.listing', {
        url: '/listing',
        views: {
            "home-tab@tabs": {
                templateUrl: "templates/cat_listing.html",
                controller: "ProductListingCtrl as listing",
                resolve: {
                    products: function(productsService) {
                        return productsService.getProducts();
                    }
                }
            }
        }
    });  

Proposed solution: Controller with loading & resolve

    app.controller("ProductListingCtrl", function($ionicLoading,productsService){
        $ionicLoading.show({
            template: 'Loading...'
        });
        this.products = productsService.getProducts();

** productsService.getProducts() returns a promise object, how can I resolve this in controller? **
   
 }) ;

I am not sure but you can try this if helps:

resolve: {
                    products: function(productsService) {
                        productsService.getProducts().then(function(data){  
                            return data;
                        });
                    }
                }

to process the promise in the the controller, do something like this

app.controller("ProductListingCtrl", function($ionicLoading,productsService){
        $ionicLoading.show({
            template: 'Loading...'
        });
        productsService.getProducts().then( function(_response) {
             // hide the loading UI, and process the data here
        }, function(_error) {
             // hide the loading UI, and process the ERROR here
        });
    }) ;