Ion-list: Empty state of list while loading content via $http


I have this <ion-list> where I load the content via $http that sometimes takes a bit longer to load. I already have a <ion-spinner> that I show depending on $scope.isLoading (which is set to false in the .then() of $http so the spinner disappears).

But this still is not very pretty as the list items just appear when the spinner goes away. I think it would feel snappier for the user, when the empy list entries already were there while loading in the background is still happening. That way the user knows that there will be some entries and he knows what to expect.

See this example:

While loading:

After loading finished:

How would I do something like that in Ionic?


Have you tried initializing your list with an array of 1O empty objetcs?

$scope.list = [ {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}];

No, because this is a too obvious solution that can’t possibly work…