feat: Center loading vertically using infinite-scroll

[felquis]

Type: feat

Platform: mobile webview

I'd like to center the loading-spinning in the center of screen horizontally and vertically using infinite-scroll.

Like in this example, http://codepen.io/felquis/pen/pCHim seems like there's no easy way to center the spinning vertically, since infinite-scroll reside inside .scroll that doesn't fit 100% of the height of the viewport like ion-pane does.

Would be nice to have a center-vertically="true" (or something like this) option in the infinite-scroll API session here http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

Thanks.

[drewrygh]

How about using:

i.icon-refreshing{
  position: fixed;
  top: calc(50% - 44px);
}

and possibly replacing the hardcoded "44px" with $bar-height if using sass? codepen

The problem with this solution though, is that simply centering vertically the icon means z-index / contrast suddenly, become important since you're positioning it over something else. When the icon is sitting at the bottom of the content, this isn't a concern. Maybe a better option would be have the developer trigger the$ionicLoading service? See this codepen for an example. Is this what you are trying to do?

[felquis]

Hi @drewrygh thanks for the fast support.

I think your second solution using $ionicLoading is a interesting way to use infinite-scroll + collection-repeat while this issue #2376 isn't fixed. But, as I saw here there's no a offset-bottom property that I can set to 44px, to use loading as a infinite-scroll complement. The $ionicLoading is always in the center of the screen or can I put it in the bottom with no CSS magic?

I will need to display: none; because infinite-scroll always show the loading spinning, and there's no way to just use the infinite-scroll functionality with no loading spinning.

Actually, what I want is:
1 - On the first load, I want the loading to be in the center of the screen (When my collection-repeat length is 0, the loading should be centered vertically), (I should use $ionicLoading for it)
2 - When the user hits the bottom, infinite-scroll trigger the loadMore() function
3 - I will load more content, and then I want the loading to be in the bottom of the screen, just like the infinite-scroll with a normal ng-repeat (I should use the infinite-scroll loading for it, but, the infinite-scroll always show the loading in the first load, but I need it to be hidden in the first load because I'll be using $ionicLoading at this point)

I'm not sure I'm being clearly, it's hard to express something in English :s But I hope you got my point.

[mhartington]

Moving this to our trello board as it is a feature request.

https://trello.com/c/lrqhyeT4/84-center-infinite-loading-icon-on-initial-load