Faster List Performance with Ionic 4 Virtual Scroll & Infinite Scroll

[@bundayyolayinka3352]

Great work Simon. The Virtual Scroll is what I need right now, I'm working with a client who wants to display over 3k records and search through instantly. I should use this. I thought I was the only one that opens Ionic docs and hit CTRL + F for what I want exactly

[@samywat]

Simon, your work is awesome! thank you!

[@galaxies_dev]

Many thanks!

[@haniqudsi]

In 14:10 you ask about the Arabic names,,, and YES they are sorted ^_^ .... thanks simon, This video is very helpful

[@galaxies_dev]

Thanks :)

[@anroswell]

Simmon thank for this great tutorial...

[@galaxies_dev]

My pleasure!

[@k4nful]

The fun fact is that the really issue with list performance in Ionic come by testing your app on a real device (smartphone) . Actually this video just going further than the (poor) ionic documentation but keep in mind that even if it's work well on chrome from your pc, on smartphones this another story! I recently developed a list with more than 6000 items and trust me it's not fluid as on a pc machine even if you apply the tips in this video...

[@galaxies_dev]

I agree, device performance is definitely always different than the pc performance. I'll try to add more realistic tests next time!

[@David-ej1ps]

Is it still possible to Combine both? use the Virtual scroll to minimize the need for the view to re-draw the new items and use the infinite scroll to automatically load new data into the array..

[@FrutasLuna]

I also think it's a pretty interesting question: How can we use the 2? Because remember that in cell phones you must reduce the data consumption of the server since the client can be connected only with mobile data. Then, in the first deliver, offer the user the most current data, and only in case the user wants to see more, go pulling more data from the server on demand. And use the virtual scroll for if the user loads a lot of data ... its visual performance is not affected. I think... What do you think Simon Grimm?

[@perriguigui1153]

You can load new idem just by adding this.lst_item= [...this.lst_item, item];

[@saeedalhamed576]

simply you can solve this with ion refresher, i am using virtual scroll with ion refresher to get latest items from server and its pretty enough

[@saeedalhamed576]

Thanks for showing some content of the list in Arabic Language :)

[@ankurshah7328]

well you(and the whole country) should try developing programming language in your own native language from ground up, i.e., assembly language to the higher language! Every country should try this to reduce the dependency on english!

[@addtyu6176]

This is great but your items are very simple, off course the performance would be fast. Have you tried adding more complex items? Appreciate your reply as I need to select a framework for my next project fast and Ionic is one of the ones we are considering

[@galaxies_dev]

Yes this was just to showcase the functionality, but those 2 concepts are exactly made for heavy lists. Especially virtual lists where you only render a limited amount of your items!

[@jonathanperry7530]

Nice video!

[@galaxies_dev]

Thanks Jonathan :)

[@mohamadvahabian274]

thank you so much for good training video

[@animesh1244]

Useful content.. thank you.

[@mauriciom7691]

this not exist for VUE? the ionic-virutal-scroll ? i need this please

[@begastertv884]

How can I implement virtual scroll WITHOUT react or angular? Just with plain JS and HTML 5. Infinite scroll is possible, but found no documentation to virtual scroll. Know how to? Thanks

[@ankurshah7328]

That's a great tutorial indeed! But I have a problem! This solution scrolls the full ion-content, even if nested inside other elements! I want a nested solution, which scrolls a part of ion-content, display wise about 60-65% of the screen with other content remaining at there place! How can I do that sir, can you please help me?

[@henningjaeger75]

Hey Simon, thank you for this video! I am facing a challenge with the approach in combination with a routerlink and routerdirection forward though. Googling it did not help and I just wanted to know if you have stumbled upon that: (only on native device) - implement an infinite scroll (best for testing with images in each item) - open that on native device - scroll down a lot of times, so that the list gets veeeery long - click on an item to get the items detail page the transition to the next page is going much slower in comparison to using routerdirection route. to me it seems the huge list is somehow slowing it down. Did you ever experience such a thing? I can reproduce this with a blank app anytime, so it is not project specific to me.

[@galaxies_dev]

No I never saw that behaviour, but of course a very long list might cause performance problems in general. Still, I don't think it should affect the general transition. So with that list the transition to a new page is slow? Perhaps open a Github issue with a basic example of the problem and a gif so the Ionic team can reproduce it!

[@henningjaeger75]

@@galaxies_dev will be my next step thank you very much for some real world experience

[@henningjaeger75]

​@@galaxies_dev Hey Simon, I just downloaded your Pokedex example at devdactic.com/ionic-4-pokedex-search-scroll/ and it faces exactly the same behaviour :-) The only thing I changed was to comment out the "if this.offset==125" so that i could get a huuge list. I did so and on my iphone as well as on the emulator it is reproducable as well: clicking on an item to get to the details page without having used the infinite scroll (a small list) the transition is instantanious. Doing the same click on the same item after having used the infinite scroll function (list got bigger then 800 items) the transition is noticeably slower. this delay is exponentially growing when each item has a big image like for example the instagram app.

[@henningjaeger75]

@@galaxies_dev seems to be an iphone issue. i can reproduce it on a 6s, 7 and 8. On several androids the performance is as good as in the web.

[@himansupanchaljitpur]

yes i face same type issue if list is big for example we store list as common provider variable and want to render that variable list to current page list

[@utercnila3]

Hi, it is possible to opacity ion-item when scroll down? The first one that would disappear. Thanks.

[@galaxies_dev]

Hmm yeah maybe with some scroll listener and a custom element, but right now I'm not sure how I would build it :/

[@utercnila3]

@@galaxies_dev Okey! Thanks!

[@jbukuts]

Just a quick question. So I'm currently implementing the virtual scroll to show a list of post. The display of them works fine the issue I have is when clicking on a post I route to another page with replies and such but when going back to the list page it does not keep my place as to where I was. Was wondering if you ever encountered this problem? Still new to ionic tbh

[@galaxies_dev]

No I didn't encounter that yet but I think I've heard it before..Usually the previous page should stay as it is when pushing a new page, do you perhaps load the data again when you return to the page?

[@manarmohammad8232]

ion-infinite-scroll with two columns not working ! please, what other solutions is available for two columns ?? thank you in advance

[@galaxies_dev]

Why is it not working?

[@calebadeleye]

What if I want the infinite scroll in reverse mode. I mean like in a chat conversation and the user scrolls down to see previous messages. Bottom to top kind of thing

[@complex-information]

For me it works if i javascript reverse() the list, manipulate it and in *ngFor reverse() it again. Add position="top" to

[@alpappii]

How would you apply a "alphabet indexed" scroll? (Like the contacts list in our phones)

[@galaxies_dev]

I think you would have to manually add list-dividers and sort the list upfront!

[@milothoxha2513]

Currently, my issue with ion-virtual-scroll is when i add an item via .push, the list is updated on console.log, but it does not show the lasts added items. if i do items = itemstThatNeedstobePushed then, a scroll to top happens and it messes up the entire list of items. Very strange.

[@galaxies_dev]

Maybe you need to use the track function, other people had issues with flickering when adding items as well (but overall seemed to work): github.com/ionic-team/ionic-framework/issues/17540

[@milothoxha2513]

Yes, i had to add viewchild, and on every push to call a function for check or something, but another issue i encountered with this is when i switch to another tab, and select an input, keyboard comes up, then i close keyboard and go back to the tab where ion-virtual is, all items are on top of the page going from one on top of eachother, i stopped using it.

[@jjpanda3390]

Sir, can I how where is my mistake here? I tired to do the sorting but I can seem to get it it says my sort is undefined. getStudentList(){ this.firestoreDbService.getData().subscribe(result =>{ console.log('result', result); this.studentList = result['results'].sort((a, b) => { if(a.name < b.name){ return -1; } if(a.name > b.name){ return 1; } return 0; }); }) }

[@AhsanAli-dw8iv]

Which Autocomplete extension are you using ?

[@galaxies_dev]

I don't think anything special, should work fine in VSC out of the box!

[@ShakeebAhmad]

What if I'm using a local database instead of online api? How to achieve this then?

[@galaxies_dev]

Then you would have to perform the according SQL queries whenever you are reloading data or load everything at once but still implement some manual pagination and only return a subset of the data!

[@pratheepgv6037]

Can we do infinite scroll for horizontal scrolling

[@galaxies_dev]

I don't think the component works in that direction yet!

[@JohnDoe-jc4xp]

Can I use Virtual Scroll & Infinite Scroll together?

[@galaxies_dev]

No I don't think that's possible.

[@SizzlingSquiggle]

Ion-infinite-scroll only seems to be working on mobile, not desktop.

[@galaxies_dev]

Hmm I think something like this was an open issue, but not sure right now. They are working on better desktop support though!

[@thedramaape-tizer5167]

The only problem for ion-item-divider comes when the list is unsorted. Then we have to sort and use it

[@galaxies_dev]

Yes that's right, but that's usually quite easy from JS :)

[@wilsondouglas1546]

another question based on this tutorial 👆👆 can you help with data pagination in firebase

[@sylvain-mozartkanumayi]

Hello, I appoint Sylvain Mozart Ngandu; I am nil in ionic on the networks there are many more of the tutorial of ionic 3, but I would like you to help me with a tutorial that explains the connection of ionic 4 with mysql starting with the slides after the login form and register and how to insert an image in background

[@galaxies_dev]

The problem is that most of the time you need a server and API which connects to your MySQL database, and not just Ionic!

[@TechForFree2023]

Maybe you need this kzbin.info/www/bejne/rWWqlJp7jaqKY6s

[@zarkoh]

Jesus, in 2019... ☺️

[@hughpapaheffner4957]

First

[@Tlbsoftware]

Hmmmm... You show how to use an infinite scroll, and then show how to use a virtual scroll. What about using these together?

[@galaxies_dev]

They don't work together as far as I know!

[@Tlbsoftware]

Simon Grimm I figured it out, first you want to inject the reference of the component into your custom component using ‘@ViewChild(IonVirtualScroll) vScroll’, then after you update the list you either call ‘vScroll.checkEnd()’ if you only added one item, or you can call ‘vScroll.checkRange(previousItemLength, amountOfItemsAdded)’ and it will add them all to the list

[@mauroinsacco2277]

@@Tlbsoftware Nice bruh, will try that out