What is the best way to implement a loading bar?

Question

I have a project SPA that in each screen transition, a loading-bar (progress bar) to improve the user experience (this UX will encompass more interactivity than performance).

But when researching, I’m coming to the conclusion that this progress bar is nothing more than an illusion, IE, nothing can be done for it to display actual loading percentages getting the loading percentage.

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

Anyway, I would like to know, what is the best way to implement it, what is the operational limitation that prevents such percentage control? and if possible in terms of UX, why it is more important for the user to know the load time, than the page actually load faster, even why transitions of this type include multiple libraries, which reflect in some way the performance.

Answer 1

How best to implement it, what is the operational limitation preventing 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 there are in all subfolders, you could calculate a percentage and increment it with each file listed. But in general you don’t know that. Therefore, there is no way to calculate this percentage and, consequently, there is no way to inform the user any actual estimate of termination. The most you can indicate is that the search is in progress.

Why it is more important for the user to know the loading time, the that the page actually load faster (up to why transitions of this kind include several libraries, which reflect in some way on the performance)?

This comparison is not very correct as they are different problems. First, the loading time is a matter of efficiency - one of the aspects of usability). Regardless of showing or not progress is desirable that the execution is as fast as possible not to make the user stay waiting. Waiting time is idle time (Idle), and almost always hurts the experience. Second, the progress bar is a matter of feedback and sense of control (only when an option to cancel accompanies the progress bar) - two other aspects of usability. In 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 for this task to be accomplished. Only in this way is the user able to reflect on the use he will make of his own idle time. What’s more, the ability to cancel 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 should be done is to try to develop the system to carry out the tasks as quickly as possible. When there are long tasks (something that can be inevitable depending on the problem domain), one should always provide feedback information (even if it is estimated more comprehensively - for example, one could estimate the progress based on the folder count of the first level, on the file listing example given above), and provide a way for the user to cancel/stop 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).

Answer 2

Just complementing the great response of Luiz Vieira

How best to implement it?

There are various forms and libraries to do this, but for that create a snowball into something trivial?

I used a very simple method. library ngProgress

Simply insert it into each 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();
    });
});