What is the best way to implement a loading-bar?

8

I have a project SPA on each screen transition will be fired a loading-bar ( progress bar ) to improve the user experience ( this UX will include more interactivity than performance ).

But when searching, I'm coming to the conclusion that this progress bar is just an illusion, that is, nothing can be done for it to display actual loading percentages .

Soon I come across tools that do this job very well angular loading bar

Anyway, I wonder, how best to implement it, what is the operational limitation that prevents such percentage control? and if possible in terms of UX , why is more important you know the load time of the page actually load faster, even by that transitions of this type include several libraries, which reflect in any way the performance.

    
asked by anonymous 02.08.2017 / 15:31

2 answers

7
  

What is the best way to implement it, what is the operational limitation   that prevents such percentage control?

The main cause of limitation is very simple: there is no way to know the "total" of the processing before actually performing it. Consider the simple example of listing all files in a folder recursively. If you knew how many files exist in all subfolders, you could calculate a percentage and increment it with each file listed. But in general you do not know this. Therefore, there is no way to calculate this percentage and, consequently, there is no way to tell the user any real estimate of the term. The most you can tell is that the search is in progress.

  

Why is it more important for the user to know the loading time,   that the page actually load faster (until why transitions   libraries, which reflect in some way the   performance)?

This comparison is not very correct because they are different problems. First, the loading time is a matter of efficiency - one of the aspects of usability). Regardless of whether or not to show progress, it is desirable that execution be as fast as possible so as not to make the user wait. Waiting time is idle, and almost always detracts from the experience. Secondly, the progress bar is both a feedback issue and a control feeling (only when a cancel option is attached to the progress bar) - two other aspects of usability . For relatively long tasks, the user needs to know that the computer is performing the task and ideally needs to know how much time is left to complete the task. Only then will the user be able to reflect on the use he will make of his own idle time. Moreover, the possibility of canceling this task gives the user an important sense of control, because based on the progress information he can decide whether or not to wait for completion.

In short, what you should do is try to develop the system to perform the tasks as quickly as possible. When there are long tasks (something that may be inevitable depending on the problem domain), feedback should always be provided (even if it is estimated more comprehensively - for example, one could estimate progress on the basis of first-level folder count, in the file listing example given earlier), and provide a way for the user to cancel / pause this process. In fact, it is quite common to perform this operation asynchronously, that is, without preventing the user from using the system for other purposes while the task is in progress (which does not eliminate the need for feedback).

    
08.08.2017 / 18:37
1

Just complementing Luiz Vieira's great response

  

What is the best way to implement it?

There are several ways and libraries to do this, but why create a snowball in something trivial?

I used a very simple method. library ngProgress

Just merge it into every example route

angular.module('suaAplicacao').run(function ($rootScope, ngProgressFactory) { 

    // first create instance when app starts
    $rootScope.progressbar = ngProgressFactory.createInstance();

    $rootScope.$on("$routeChangeStart", function () {
        $rootScope.progressbar.start();
    });

    $rootScope.$on("$routeChangeSuccess", function () {
        $rootScope.progressbar.complete();
    });
});
    
10.08.2017 / 18:10