Load the data after the page loaded #3
Description
Summary
Right now the data is queried, loaded and prepared in a Django view function before the template is rendered. It slows the loading of the web page, and the users are left with an empty screen until the data is loaded. The design (template) of the page should be loaded in the first second, and a loading gif can be displayed in the middle of the page until the data is loaded. Thus the users would know that the webpage is working but they need to wait until it loads the data.
Solution
- The view should only be responsible to render the correct template.
- Data preparation code should be kept separate from the view function, and placed in a stand-alone Python function that returns the data in JSON format.
- Configure urls.py to be able to call the data preparation function by a URL.
- On the client side, a JavaScript function can make an Ajax call to the URL of the data preparation function.
- Finally, the returned data should be placed into the website design by JavaScript.
Note: There is a nice tutorial on how to make Ajax calls from JavaScript to a Django server: https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html
Subtasks
To be listed after they are created