Django - show loading message during long processing

Here's an oldie, but might get you going in the right direction: http://djangosnippets.org/snippets/679/

After trying the two different approaches suggested by Brandon and Murat, Brandon's suggestion proved the most successful.

1. Create a wrapper template that includes the javascript from http://djangosnippets.org/snippets/679/. The javascript has been modified: (i) to work without a form (ii) to hide the progress bar / display results when a 'done' flag is returned (iii) with the JSON update url pointing to the view described below

2. Move the slow loading function to a thread. This thread will be passed a cache key and will be responsible for updating the cache with progress status and then its results. The thread renders the original template as a string and saves it to the cache.

3. Create a view based on upload_progress from http://djangosnippets.org/snippets/678/ modified to (i) instead render the original wrapper template if progress_id='' (ii) generate the cache_key, check if a cache already exists and if not start a new thread (iii) monitor the progress of the thread and when done, pass the results to the wrapper template

4. The wrapper template displays the results via document.getElementById('main').innerHTML=data.result

(* looking at whether step 4 might be better implemented via a redirect as the rendered template contains javascript that is not currently run by document.getElementById('main').innerHTML=data.result)

Another thing you could do is add a javascript function that displays a loading image before it actually calls the Django View.

function showLoaderOnClick(url) {
      showLoader();
      window.location=url;
  }
function showLoader(){
      $('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
  }

And then in your template you can do:

<a href='#' onclick="showLoaderOnClick('{% url 'my_namespace:my_view' %}')">This will take some time...</a>

Here's a quick default loadingDiv : https://stackoverflow.com/a/41730965/13476073 Note that this requires jQuery.

a more straightforward approach is to generate a wait page with your gif etc. and then use the javascript

window.location.href = 'insert results view here';

to switch to the results view which starts your lengthy calculation. The page wont change until the calculation is finished. When it finishes, then the results page will be rendered.