Loading many tables in same page with tabs

I've never really used Laravel blade purely for front end too much so I'm not sure the approach for the following scenario:

Right now, there is a page with 5 tabs, each tab loads a table with a lot of data. What the current code does is to load all the tables on page load, and whenever you click the tabs the tables are ready.

However, this takes a lot of time to load and plenty of resources (over 75 MB, and not to mention other bad practices done there)

So the controller basically has one method with 5 queries to load the 5 tables and then returns the data to the main blade view

But I was thinking about separating it to 5 different methods in the controller for each query, and load the table only when you click on a tab. Is that the correct approach? Also, what else can I do to optimize it further? Maybe cache? Something else?

thank you!

vybeauregard

3 years ago

Level 54

If loading times are an issue, there are a few approaches you could try.

An initial easy win is to implement pagination (https://laravel.com/docs/9.x/pagination#main-content) so that even with 5 queries running, there's much less data coming down the pipe than a select * query.

On that front, determine if the data you're loading is all critical for the page to display. Especially with large datasets, selecting only the columns you need will preserve time and bandwidth.

If pagination's not an option, you could try loading up the view and deferring each tab's content to an AJAX request and toss up a spinner placeholder while they load.

1 like

Ligonsker

3 years ago

Level 8

@vybeauregard there is pagination, so I Guess they implemented it horribly. I will try to redo everything as well

Please or to participate in this conversation.