Question

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.

Was it helpful?

Solution

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;
  });
  ...
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top