How to show 'loading' between MVC Views

Question

I have a view with a jquery-generated table full of data. In that table, one of the columns has a link (standard <a href="">) to another View (entirely separate controller). Clicking this link can, frequently, cause a long load time, as the View that is loading potentially has a massive amount of data to churn through before spewing its results onto the screen.

Is there a way, upon clicking one of those links, to get a 'loading spinner' until the new screen loads?

Again, this is a standard hyperlink (href) in a View that links to a completely separate View, separate controller.

Answer 1

Here is a sample from one of my sites with a submit button and simply blocking the UI on click. The image below shows what the user then sees. After the data is gathered the new page is then loaded and presented.

<input type="submit" value="Search" name="searchparty">

<script>
//submit search, display loading message
    $('input[type = submit]').click(function(){
        $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000',
            opacity: .6
        } }); 
    });
</script>

Answer 2

I have used the following with Javascript events to show loading image while a page loads:

$(window).on('load', function () {
  $(".loadingDiv-parent").fadeOut("slow");
});
$(window).on('beforeunload', function () {
  $(".loadingDiv-parent").fadeIn(50);
});

CSS to display image properly:

/*  LOADING SPINNER  */
.loadingDiv-parent {
   position: fixed;
   text-align: center;
   width: 100%;
   height: 100%;
   z-index: 999998;       
}

.loadingDiv {
   position: fixed;
   text-align: center;
   top: 40%;
   left: 45%;
   z-index: 999999;
}

.loadingDiv .loading-image {
   display: block;
   margin: 25px 75px;
}

Then in the View:

<div class="loadingDiv-parent">
  <div class="loadingDiv">
    <div class="card border-success">
        <div class="card-header">
            <h3 class="panel-title">Loading ... Please Wait</h3>
        </div>
        <div class="card-body">
            <i class="Your_icon loading-image" style="font-size:7em;" aria-hidden="true"></i>
            <span id="panelclose_btn"></span>
        </div>
    </div>
</div>

I have used a Font Awesome icon to show as a loading spinner image.