0

I have a performance issue when I open ionic 3 Modal. I need to show a list in the modal and the length of list is 1000.

It takes few seconds to open the modal while they are rendered.

I thought about using InfiniteScroll in the modal, But I use Searchbarwhich means server-side should develop more APIs for that.

Since the data of list is quite static, I would like to make like :

  1. Preload the modal page and hide by default.
  2. Show the modal when it should be opened.
  3. When the modal is closed, DO NOT destroy it, just hide.

But according to the ionic docs, I can't reuse modal.

So my question is : Is there a better way to make searchable 1000 list in ionic3?

Thanks.

EDIT : I have tried with localStorage to save json (about 100kb) and stop using XHR to reduce loading time. However I don't feel loading time gotten faster. I tested with just 100 list instead of 1000 and opening modal was a lot faster.

2 Answers 2

0

There are a several options:

  1. If it is actually static, just place it in web storage and retrieve it when the use reloads the page.

  2. If it's "quite" static, whatever that means, just place it in the DOM somewhere so it only has to load once per page load. When the user clicks the link to open the modal, store the data in a hidden field. It might even be a good idea to load it asynchronously as the page is loading, which could potentially completely eliminate any loading times at all from the user's perspective.

  3. Use your own modal, and just hide/show it. Load it async.

Example of cache

jQuery AJAX Example

4
  • Thanks for the answer. Actually I didn't mention about what I've tried with local storage. In order to save xhr get time. I saved json data (about 100kb) in the local storage. But I don't see the performance is gratefully increased. I tested with just 100 list instead of 1000. It really gotten faster. So I thought this is the issue from rendering.
    – Téwa
    Jun 21, 2017 at 13:34
  • So your options 1, 2 doesn't work. 3 can be good idea. Just I am wondering if there is build-in ionic 3 component that make it faster and easier.
    – Téwa
    Jun 21, 2017 at 13:37
  • It's just generated HTML. Look at the source generated when the modal is opened, copy/paste, and voila. It should work. Jun 21, 2017 at 13:39
  • Ok I actually didn't think about taking generated HTML itself. I tested with using XMLSerializer's serializeToString method and successfully copy&paste the list into the modal. However the HTML that I copied include ionic tags such as <ion-item> or <ion-checkbox> and using <div [innerHTML]="myCopiedHtml"> ignore ionic tags. I think I have to go either #3 from user option or using InfiniteScroll.
    – Téwa
    Jun 21, 2017 at 15:04
0

Ok I made it by using <ion-infinite-scroll (ionInfinite)="doInfinite($event)">.

  1. First of all, when modal is opened, get list data from the server and save in local storage
  2. In the beginning just show 20 items out of 1000. So the rendering would be a lot faster.
  3. When user scrolls down, doInfinite will be executed.
  4. In the doInfinite function, check what is the next index in order to show the data. Like pagination logic. And get proper data and push to the list array.
  5. About <ion-searchbar>, when you get list data from either server or local storage, save an original list data for the search (In my case, I just used this.originalData = myData like that.). By doing so, whenever user searches by typing, you can filter from 1000 array but no slow rendering issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.