Page loader + modal

Is there a way to change the z-index of the page-loader? I must probably check in the css…

I have a modal that uploads an image and then closes when done and updated, but the page loader is below the modal, so it defeats the object of letting the user know that something is happening.

Is it just my template or a general app connect modal/loader issue?

Hello @pixlapps
Why not just using a bootstrap 4 loader, or any other “loading” message in the modal in this case?

The page loader is more suitable for initially loading a page, not for actions like that.

I may be misunderstanding the problem, but I have a progress bar to show the uploads.

      <div class="form-group row">
        <label for="Image" class="col-sm-2 col-form-label">Images</label>
        <div class="col-sm-10">
          <input name="Image[]" type="file" multiple="multiple" class="form-control" id="Image" aria-describedby="Image_help">
        </div>
      </div>
      <div class="progress" dmx-show="state.uploading">
        <div class="progress-bar text-warning" style="width: 0" dmx-style:width.important="uploadProgress.percent+'%'">Uploading Images</div>
      </div>
3 Likes

Hi Ben, yes that’s exactly what i suggested. :slight_smile:

Thanks for feedback @Teodor and @ben! The progress bar makes sense. I just have a predicament in terms of UX… From the onslaught, maybe using a modal is wrong, but let’s just say it was the right choice… The user fills the fields and adds file to file field, then submits form, progress bar shows and buttons are disabled so they can’t manually close window… unless I do not care about it, since backend is already handling the submit request. I still have the close button on modal that can be used for closing before file upload is finished and then the user might also navigate to other page before upload is done… that is always my fear… user closing modal and navigating away.

Do you think above is still best for UX and data entry completeness?

Hi Marcel,

It really does not matter if the modal is closed prior to the upload finishing, the action has already been triggered. If the modal has not been closed by the user, it can be closed automatically after the action has been successful

dmx-on:success="mdlProductImagesAdd.hide()"

I use the ‘mdl’ prefix to show that the element is a modal.

Thanks @ben I am just worried that they close the modal and navigate to other page while upload is still busy. I am in 3rd World Country :slight_smile: So internet is not always that fast and uploads can take a while on slow connections. My usual method was using my own loader that covered the page till upload was done to prevent above scenario.

No worries Marcel. As I said, the action has already been triggered. Even if you were to close the browser before uploading has finished, the action will still be executed.

just disable the buttons in the modal until the upload is finished. and you could change thier text to “please wait…”

@mrbdrm, disabling the buttons will not help because when the user clicks outside of the modem, the modem will close.

Don’t forget that the action is performed on the server. Once the action has been triggered, the client (browser) has no influence.

@ben first you have to add this to the modal html
data-backdrop="static" data-keyboard="false"
this will prevent the back click to close the modal and disable the ESC button click to close it.
and you disable the button on the server connect start event then enabling it on the done event.

1 Like

My bad, sorry. But this will not stop the user from closing the browser or navigating to another page/site.

My point is that it is not relevant.

sorry ben but i don’t get your point :sweat_smile:

you can never stop the user from closing the browser or shutting his computer off
the server action will execute nevertheless and the user cant stop it. and he have to wait until its finish. isn’t this the required action?

@ben I think it is relevant if you are uploading files and that a open browser tab is needed to complete uploading, once the file is uploaded whatever happens on the server happens there. So my point is to not interfere with the browser to server uploads while they are busy. Thanks for your input guys