0

I'm developing a application which is essentially: User selects group of data, a new tab within the page is created and the data is loaded from a restful service( Can take ~10seconds with larger amount of data to display )

I'm wondering if anyone has any suggestions as to handle something like this, or any examples. As currently I have three methods but none seem ideal:

  1. Store the data in the tab object in angular(makes opening new data and navigating very slow)
  2. Load the data every time that tab is selected( Can take up to ~10secs but doesn't impact anything else )
  3. Host data on a different page and show via an iframe, but I've decided against this as an iframe would reload when a user selects a different tab.

Has anyone dealt with a similar use case and has some advice for someone who is quite unsure what route to go down? Thanks.

Andrew
  • 7
  • 3

1 Answers1

0

In such a situation, the first thing you should try is to optimize your requests.

A good strategy can be to split your request. If it takes 10 seconds, most likely there is more data that can be viewed by the user in a window. Therefore, you can do multiple smaller requests and render them as they resolve. This way, your user will immediately see some content and won't realize more is being loaded. You should also look into lazy loading Basically, making your request only when your user absolutely needs it.

If this is not possible, you can eager load all the data in your tabs(make all the requests as soon as possible) but not render it immediately to avoid slowing navigation by making angular watch a lot of data in it's digest cycle that is not visible. You could do this by using the ng-if directive (ng-if removes the content from the dom) on your tabs content. However, this is not optimal as the data might not be ready if the user is too fast.

Anthony Garant
  • 614
  • 7
  • 13
  • Hi, thank you for your reply. I looked at lazy loading but for some reason forgot about it. I guess one problem still is the content currently presented will still slow down the page, though I feel like there may be no way around that. Storing things within angular scope is one thing I've currently been doing. Thanks again. – Andrew Aug 15 '15 at 16:44
  • So have you optimized your requests? What strategy have you try? About the content presented slowing the navigation, I suggest you read this great answer by Misko Hevery. http://stackoverflow.com/questions/9682092/databinding-in-angularjs – Anthony Garant Aug 16 '15 at 01:33
  • I haven't yet got round to it, but I plan on trying a few tomorrow and seeing the results. Mainly lazy loading, and trying pagination with eager loading. And I'll read( and try to understand ) that post, thanks a lot. – Andrew Aug 16 '15 at 12:50