Many times I've seen live progress bars indicating amount of data loaded from heavy-data web apps notifying users about loading process (% or filling bars) before page started rendering. How can it be implemented?

CodePudding user response：

I think that there is no perfect solution. And certainly not one correct answer. It mostly depends on the capabilities of the API/Server. I focussed on how to get the progress towards the frontend. And there i see three different types of data transfer.

❌ Timer (Worst solution) You can use a timer based on the average loading time. I don't think I have to explain why this is not a good solution. But this does not really give a correct loading state.

✔️ Polling You can use a polling system to retrieve the data. When the data is not ready yet you return the progress. If the data is ready, return the data. For example:

Step 1: GET the data from the REST-API
        This call returns an id linked to the request. F.e. ID-1

Step 2: You poll each couple of (mili)seconds the status of the request, based on the ID.
        This call returns for example:
          {
              status: 20,
              data: []
          }
        As soon as the status is 100, the data is provided

✔️ Web sockets Instead of polling you could also use sockets to update the frontend with the correct status. The server will publish the status towards the frontend. For this approach you will also need a certain type of ID to make sure you only receive your progress.