Busy overlay

Default actions

When you submit a form in Metrici, if the next page takes more than 2 seconds to be shown, an overlay is put over the form to show that the system is busy and to prevent the user from using it. The overlay is a transparent grey colour with a spinner in the middle.

The overlay is not shown when navigating from one page to another using a normal links.

Adding the busy overlay to a link

If a link is likely to take a long time, you can show the busy overlay by adding a class of "busy" to the <a> tag.

<a href="..." class="busy">This will take a long time</a>

Multiple form submission without showing busy overlay

Metrici typically refreshes the page after a form submit, so the form behaviour is nearly always what you want.

However, if a form button will result in a redirect to a file that will be downloaded (see the Download section in Files), then you will not want to block the form. Use the class "submit-multiple" on the submit button.

<button type="submit" name="button" value="download" class="btn btn-success submit-multiple">Download file</button>

Showing/hiding content when busy using CSS

When the busy overlay is shown, the class "busy" is added to the body. You can apply CSS to show or hide sections accordingly.

Changing the busy overlay

The default overlay is standard across the whole of Metrici, and users will be used to seeing it and understanding what it means.

In some cases, specific forms might want a different approach - for example, to confirm a submission from a user and ask them to wait.

To do this, put the content you want to show in a div, with two classes:

  • d-none - the standard Bootstrap class to prevent the content being shown usually.
  • d-busy - a class that indicates that the content should be shown instead of the normal busy prompt.

If you use d-busy, the form will not automatically be overlayed (though it would still reject duplicate submissions). You can put a transparent overlay over the page using this markup.

<div style="position:fixed;display:block;width:100%;height:100%;

Put this inside the div with d-none and d-busy - it will only come into effect when the page is busy.

You can add your content after this overlay.

The example below shows an alternative overlay which has an alert box thanking the user for their submission. The alert box will be shown in addition to the rest of the form.

<div class="d-none d-busy">
<div style="position:fixed;display:block;width:100%;height:100%;
<div class="alert alert-info">Thank you for your submission. Please stand by.</div>

If you want to show only your content, use the class d-busy-replace in place of d-busy. This allows you to hide the form and show an entire page of content to the user.

You can test your content by removing the d-none class. However, this won't hide the rest of the your content if you have used d-busy-replace, and the format of your busy content may be affected by the remainder of the content, for example by showing it in a form.