All cloud based software at some point has to wait for the database or web hosting instance to respond.
This can be for a number of reasons including slow mobile connections or finger trouble resulting in multiple requests. (Read: impatient user)
We need to always think of the users experience, if they click on something and it doesn’t respond right away they will click again or even close your application saying it’s broken. The simplest way is to prompt the user with a ‘please wait’ notice. This immediately tells the user that the software received the event and its busy doing something.
‘Any product that needs a manual to work is broken’ - Elon Musk
These ‘please wait’ events go by many names such as ‘wait model’, model, loader, ajax loader, spinner - all have merit and if something works leave it alone.
I like to call them a ‘loader’ as this is generally what I have found clients to understand them as and this helps with the vocabulary of their Ubiquitous Language (UL).
Some code samples to follow.
Add this to /Views/Shared/_Layout.cshtml if you are using ASP.NET MVC. If you are using Web Forms you can add it to your xxx.Master page
Side Note: perhaps you should look at moving away from Web Forms :D
Create your .GIF file
Sites like ajaxload.info allow you to generate your ajax-loader.gif file.
The Graphics Interchange Format (better known by its acronym GIF) is a bitmap image.
Although you could use CSS (Cascading Style Sheets) to generate a cool spinning loader it may not work on all devices - it depends on your target audience.
You can also use a .PNG (Portable Network Graphics) file although I have had issues with these files on mobile devices.
The CSS (Cascading Style Sheet) snippet below was taken from stackoverflow.com
Trigger jQuery AJAX
This will automatically trigger your loader when a jQuery AJAX request is done.)
$body = $("body");
Trigger if you are using System.Web.Mvc.Ajax.BeginForm
Simply Add the image to your page:
<img id="ajax-loader" src="~/Content/img/ajax-loader.gif" style="display:none;" />
Then set the LoadingElementId property when the form is created
@using (Ajax.BeginForm("ActionName", "ControllerName",
The framework will then handle displaying and hiding your ajax-loader.