Lazy loading with python and flask

Question

I’ve build a web based data dashboard that shows 4 graphs - each containing a large amount of data points.

When the URL endpoint is visited Flask calls my python script that grabs the data from a sql server and then starts manipulating it and finally outputs the bokeh graphs.

However, as these graphs get larger/there becomes more graphs on the screen the website takes long to load - since the entire function has to run before something is displayed.

How would I go about lazy loading these? I.e. it loads the first (most important graph) and displays it while running the function for the other graphs, showing them as and when they finish running (showing a sort of loading bar where each of the graphs are or something).

Would love some advice on how to implement this or similar.

Thanks!

Answer 1

I had the same problem as you. The problem with any kind of flask render is that all data is processed and passed to the page (i.e. client) simultaneously, often at large time cost. Not only that, but the the server web process is quite heavily loaded.

The solution I was forced to implement as the comment suggested was to load the page with blank charts and then upon mounting them access a flask api (via JS ajax) that returns chart json data to the client. This permits lazy loading of charts, as well as allowing the data manipulation to possibly be performed on a worker and not web server.