0

I own a single page application implemented using AngularJs.

Let's suppose my application has 2 pages, sharing the same main top-navbar.

The navbar should display (among other things of course) the current number of unread messages addressed to the connected user, like this screenshot shows:

enter image description here

In my current implementation, while AngularJs starts to be loaded, I trigger in the run method an ajax query to get all the current user's messages (of course, just after the query aiming to check if any user is authenticated).

However, as $http.get is perfectly asynchronous by nature, it is frequent that there is a delay of one or even two seconds (in the worst case, if there are many messages and an additional logic) between the navbar display and the update of number of messages:

enter image description here ............ 1 second later ...... enter image description here

If the icon was a specific page content, I could use the resolve property of the template, but in this case, the navbar is shared by each page.

Should I display some icon representing a "load" of messages while messages are queried to inform user that some messages may be present?

How to deal with this case?

It seems to be the main drawback of single-page-application IMHO.
Indeed, in a non-single page application, the query could happen at server side before server before sending the web page to the client, leading to no delay at all.

6
  • Have you considered using ui-router. You can keep navbar within state changes along with url change ?
    – code90
    May 6, 2014 at 0:29
  • @code90 It would mean that during this delay of one second, I should "hide" the main navbar thanks to state provided by ui-router? Seems not very UX, doesn't it? Can you write an example (not in code but conceptual)?
    – Mik378
    May 6, 2014 at 0:32
  • I use ui-router in my projects and quite oftenly using resolve property of the state which lets me load the data upfront from server then show the page. In your case, you can use abstract state to keep the navbar on the page within routing between two pages. The delay will happen at the initial load of the page. Afterwards, you can set your code to how often it will reload the data from server which should be transparent to user.
    – code90
    May 6, 2014 at 0:40
  • @code90 "The delay will happen at the initial load of the page" > This is my OP. After the page is initialized, I don't have any issue. I don't see the benefit with ui-router in my case, since the navbar is not included in any specific template but in the index.html, using ng-include. My issue is at the initial load (when user presses "F5" for instance).
    – Mik378
    May 6, 2014 at 0:43
  • I see, sorry that your question was not clear to me.
    – code90
    May 6, 2014 at 0:47

1 Answer 1

1

I see this as the beauty of single page apps. Rather than waiting seconds for a page to load messages (on the server) that I might not be interested in, it can be lazy loaded giving me instant feedback to perform my desired task.

I would typically go with a directive for something like this and stay off $rootScope, but it sounds like ngShow/ngHide would be able to tie in directly to your setup:

HTML/JADE (classes are just an example)

div#messages(ng-show='messages')
  i.fa.fa-envelope-o
    span.badge {{messages.new.length}}
div#msgLoading(ng-hide='messages')

Javascript/Angular

.run(function($rootScope, $http, ...
  ...
  //$rootScope.messages has not been instantiated yet
  $http.get('//someendpoint').then(function(results) {
    $rootScope.messages = results.data;
  });
  ...
4
  • I agree. So my solution would be the same except I'd put a kind of spinner (loading icon) in place of the "envelop" icon during the load. Is that what you mean?
    – Mik378
    May 6, 2014 at 0:59
  • I wouldn't overlay it over the entire page (that would defeat the purpose of limiting a user based on loaded assets). Just add a small, in-line spinner that represents messages loading. Plenty of inline spinners here if you are stuck: codepen.io/collection/HtAne
    – justin
    May 6, 2014 at 1:06
  • Yes of course, that what I meant in my comment just above: only a spinner on the message icon, so that user can do the desired thing if that doesn't depend upon a received message.
    – Mik378
    May 6, 2014 at 1:09
  • Thanks for the link :) Nice spinners!
    – Mik378
    May 6, 2014 at 1:12

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.