Angular ui-router: How to render parent view before child's resolve is resolved?

Question

Consider the following ui-router setup:

index.html

<div ui-view></div>

ui-router configuration

$stateProvider
  .state('search', {
    abstract: true,
    url: '/search',
    views: {
      '@': {
        templateUrl: 'main.html'
      }
    }
  })
  .state('search.results', {
    url: '/results',
    views: {
      ...
    },
    resolve: {
      data: function() {
        ...
      }
    }
  })

When I navigate to search.results, main.html is not rendered until resolve is resolved.

Is there a way in ui-router to render the parent view before child's resolve is resolved?

Another related question

Answer 1

As mentioned in the comment, the purpose of using resolve is to prevent a state change from occurring until the data is loaded. You obviously don't want that behavior, because you want to enter the state and render part of the view before "data" is loaded. The solution is to load "data" in the controller instead of using resolve. If there is logic in the controller that depends on "data," just move that logic into a callback.