feat: Infinite scroll with any kind of loading possible

[felquis]

Type: feat

Platform: all

Hi guys,

I was thinking about the ion-infinite-scroll, and I have some insights I'd to share with you.

First of all, I noticed that when using ion-infinite-scroll with ng-repeat, the spinner appears where I put the ion-infinite-scroll directive, so may be useful to use the content of this directive to show a completely different loading, to let developers use whatever they want to use as a loading, like:

<ion-infinite-scroll
  on-infinite="loadMore()"
  distance="10%"
  use-content="true">

  <p>
    <ion-spinner class="spinner-light"></ion-spinner>
  </p>

  Loading
</ion-infinite-scroll>

Also, would be great to do not apply any CSS to ion-infinite-scroll, then I could for example apply a position: absolute and use something really different like the loaders used in gmail, foursquare and other in the kitkat, or use the awesome loaders created by I bunch of creative people like these loaders http://samherbert.net/svg-loaders/

---

Secondly, I think would be great to setup the ion-infinite-scroll only in the JavaScript Land, like we do with $ionicLoading, $actionSheet and others.

I think it would be useful to help us work with collection-repeat & ion-infinite-scroll, for example:

'use strict';

angular.module('myApp')

  .controller('BuscaCtrl', function (
    $infiniteScroll
  ) {
    $infiniteScroll.setup({
      distance: '10%',
      spinner: 'spiral',
      spinnerClass: 'spinner-light or-something-else',
      position: {
        top: 44, // value in px, default to bottom 44 (above a tab menu), or could be bottom
        // bottom: 44,
        left: 0, // default 0
        height: 10,
        width: '100%'
      },
      firstLoadPosition: {
        // the same as position but only for the first load
        // Would be useful to initialize the spinner vertically centered
      },
      template: '<my-own-crazy-loading></my-own-crazy-loading>',
      onInfinite: function () {}
    });
  });

I believe (in someway) it probably help us work with collection-repeat because the position value is to determine an absolute position in the screen, so, I could use the height property, or pre-configured height to add it as the height of the last item of a collection-repeat list, or to use it just with a absolute position and a high z-index to display it above the content of collection-repeat.

I think would be nice some pre-configured position values, like top, bottom, center and the ability to build my own position to do crazy stuffs.

---

That's it. I have no idea about the implications of building something like this, but I can see it as the nirvana of ionic's infinite-scroll. I hope it helps build ionic even better :)

(I'd to hear the opinion of others developers about this)

[EjayJanis]

So how do you add a spinner to your whole content? I have an almost finished app and I don't know where to place all the js files even the html files. I am working with an app with ready made functions so I find this very tricky to fix.

[Fayozjon]

Ejay

http://mcf-pme.ci/robot_strategii

24.03.2015, 11:43, "Ejay" [email protected]:So how do you add a spinner to your whole content? I have an almost finished app and I don't know where to place all the js files even the html files. I am working with an app with ready made functions so I find this very tricky to fix.

—Reply to this email directly or .

[mhartington]

Closing this as a feature request and moving to our trello board.

https://trello.com/c/o39gwMD6/96-infinite-scroll-with-any-kind-of-loading-possible

[Gamerakki]

hi any update on this ?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.