Question

I’m not sure what’s the best way to create a loading page while my application is doing something at the backend and it takes quite a bit of the time to process. What I’m doing right now is to have a page with a loading gif and then use javascript to redirect to the page which takes a long time to load.

%img{:src => "/images/loading.gif"}

:javascript
   $(function() {
      window.location.href="/detail"
   });

So the /detail page takes around 10 seconds to load. In this way, while /detail page is loading the browser will show the loading gif spinning. Is there any more other way to achieve this?

Answer 1

Here’s what I’d suggest:

• Start the background task using Ajax.
• Display the loading gif after the Ajax call starts. See here.
• When the Ajax call is over ($.ajax.complete) and returns an expected response, redirect the user.