C# Webforms show Loading indicator during code exe

Question

The Webforms application I have is very data heavy, it's mostly ASP controls doing ADO.net operations. I have loading times of anywhere from 5-15 seconds, which is normal, but I'd like to make it more obvious to the user that their request is being processed.

What I'd like to do is add a loading image or some kind of visual element that will show when server code runs.

ASP:

<telerik:RadButton ID="OKbutton" runat="server"
    Skin="WebBlue"
    Text="OK">
</telerik:RadButton>

C#:

private SqlDataReader dr = null;
protected void OKbutton_Click(object sender, EventArgs e)
{
    //Long running query
    string query = "UPDATE Employees SET Salary = 12345 WHERE EmployeeID = 123"

    SqlCommand cmd = new SqlCommand(query, db.DbConnection);

    dr = cmd.ExecuteReader();
}

Answer 1

Don't bother with an animated image use pure code. Just display this whenever it is needed.

spin.js

Answer 2

You can use jquery BlockUI for this. Link to Demo. This should work for all your cases (full postback and partial postback).

Add event handlers for beginRequest and endRequest of PageRequestManager. In the BeginRequestHandler you can start displaying the loading indicator with your customized settings and in the EndRequestHandler you hide the loading indicator. If you don't want to block the whole page then this plugin has option to show the loading indicator for an element (eg. within a div in the page, refer the demo page)

<script type="text/javascript">
    function pageLoad(sender, args) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
    }

    function BeginRequestHandler(sender, args) {
        showLoadingUI();
    }

    function EndRequestHandler(sender, args) {
        $.unblockUI();
    }

    function showLoadingUI() {
        $.blockUI({
            message: '<h3><img src="../images/ajax-loader.gif" /> <br /> <span style="font-family: Tahoma,Verdana,Arial, Sans-Serif; font-size: 12px; color: #1390c6;"> Loading...</span></h3>',
            showOverlay: true,
            css: {
                width: '130px', height: '110px',
                border: 'none',
                padding: '10px',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .9
            }
        });
    }
</script>

Also remember to reference the jquery and the blockui plugin scripts from either CDN or from your local application.

<script type="text/javascript" src="jquery1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>