Questions about progress bars and monitoring progress

Wappler General
#1

I have a server action which include several steps - including uploading a tab-separated file and then importing it into a database table. Can the progress of the individual processes be indicated using progress bars?

When assiging dynamic attributes, there are specific options for uploading and downloading. I couldn’t see any options for importing or exporting, so assumed this might work as a condition:
state.executing || state.processing
… but it doesn’t seem to. I can however display a rotating icon using this condition, but I may have used the progress bar options incorrectly.

What is the difference between ‘executing’ and ‘processing’? Can they be used with progress bars as conditions? Do they apply to all actions or specific ones. Eg in this case, does ‘executing’ (or ‘processing’) include both uploading and importing, or just importing?

image

Setting up a progress bar with a file upload works very well and is easy to set up. Is this feature intended to work with any process which might take some time - eg updating a larger number of records etc.?

1 Like
#2

Hello @TomD, this may seem to be an old post but I was wondering were you able to make the progress bar work aside from being an indicator for file uploading/downloading?

#3

Hi @zitroware. No, I think I could only get it to work for uploading. However, I didn’t persevere very much as I decided using a spinner for the second process (importing) was a good solution.

I still don’t know the difference between ‘processing’ and ‘executing’. I think I only ever use ‘executing’ but it would be good to know the difference, in case they’re each needed in specific circumstances.

#4

I guess I will also have to use the spinner instead. I think the progress bar can’t be used on processes other than uploading/downloading of files because only the uploading and downloading has the % value that can be used for the progress bar width.

Because of this, I am thinking of just showing the 100% of the bar and let the stripes animation show when the server action is executing. Then put the width back to 0% after to hide the animated stripes.

Do you have any ideas how to do it?

The progress bar is a good decoration on top of the table because it blends well even when not doing anything.

#5

Looking at the page where I used this, I see used a barber pole and a percentage indicator. It looks like this:

image

Once the upload is completed, this appears during the import process:

image
… which seemed to make sense.

I was experimenting with these features, so it’s likely the code could be improved, but this is the relevant part:

<div class="progress mt-2" dmx-show="sc_frm_upload.state.executing">
<div class="progress-bar bg-primary progress-bar-animated progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" dmx-style:width="sc_frm_upload.uploadProgress.percent + '%'">uploading...</div>
</div>
<p dmx-show="sc_frm_upload.state.uploading">File upload progress: {{sc_frm_upload.uploadProgress.percent}}%</p>
#6

I was trying to make it this way:

  1. When Idle, the bar is not colored.
  2. When executing (e.g. when querying db), the bar is colored.

Like this:
When idle
progress_bar_idle

When executing
progress_bar_processing

I was able to do it via class toggling, between bg-light and bg-success. My bar width is 100% all throughout. But then it looks like another decoration. It would have been nice to make use of it so that I don’t have to think where to place the spinner on the page. :smile:

I guess I have to resort back to the spinner.

#7

I always put the spinner right on the button and disable the button.

1 Like
#8

But I don’t have a button on the page. Only a table. I have already thought of putting the spinner on the table headers so that when the user clicks to sort the column, it will appear. But it kind of resizes the table. And since the table is inside a navtab, I also thought of putting the spinner on the navlink (folder tab) to replace my icon when executing. But it kind of quite tedious (I learned to be lazy when I started using Wappler, :smiley: ).

Well I guess I will keep the progress bar on top of the table. It still kind of alerts and tells the user to wait. My query is taking 1 to 2 seconds to load everytime it is sorted. Maybe because of the view I am using. I still have to look into it for sure. :slight_smile:

Still, it would be good to use a “progressing” progress bar in general on a page and not just for file uploading/downloading.