Loader - Client Side

Loader - Client Side

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.

HTML

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

1
<div class="modal"></div>

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.

CSS

The CSS (Cascading Style Sheet) snippet below was taken from stackoverflow.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.modal { 
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 )
            url('ajax-loader.gif')
            50% 50%
            no-repeat;
}
 
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
 
body.loading {
    overflow: hidden;  
}
 
/* Anytime the body has the loading class, our
   modal element will be visible */
 
body.loading .modal {
    display: block;
}

Trigger jQuery AJAX

This will automatically trigger your loader when a jQuery AJAX request is done.)

1
2
3
4
5
6
$body = $("body");
 
$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

AJAX stands for Asynchronous JavaScript and XML.

Manual Trigger

You can manually trigger your loader with the below in any of your native Javascript methods.

1
$("body").addClass("loading");

Trigger if you are using System.Web.Mvc.Ajax.BeginForm

Simply Add the image to your page:

1
<img id="ajax-loader" src="~/Content/img/ajax-loader.gif" style="display:none;" />

Then set the LoadingElementId property when the form is created

1
2
3
4
5
6
7
8
@using (Ajax.BeginForm("ActionName", "ControllerName",
                new AjaxOptions
                {
                                HttpMethod = "Get",
                                InsertionMode = InsertionMode.Replace,
                                UpdateTargetId = "divResults",
                                LoadingElementId = "ajax-loader"                            
                }))

The framework will then handle displaying and hiding your ajax-loader.

References