CODEWITHSUNDEEP
vue.js
southpaw93
southpaw93

Reputation: 1961

Browser freezes for 4-5 seconds until Vue component finishes loading

I have a Vue component: task.vue which generates a list of tasks, and an epic.vue component which is the parent of task.vue, so for each epic.vue I generate it's tasks list from task.vue. The problem is that when I reload the page, the browser freezes for 4-5 seconds until the task.vue component renders completely.

Everytime I reload the page I have an ajax that fetches all the data from an api function. It returns a nested array containing epics(folders in folders), each with it's own set of tasks. It is indeed a big array, could contain 1000+ records.

Is there a way to fix the freezing of the browser while the task.vue component loads ?

In my epic.vue I simply pass a prop to task.vue component containing all the task that current epic has.

My array structure and vue rendering is exactly like: https://vuejs.org/examples/tree-view.html.

Upvotes: 0

Views: 2764

Answers (1)

mrogers
mrogers

Reputation: 1217

If the loading time is directly related to the number of records you're loading then you could consider loading an initial chunk (e.g. 100 or so) to allow for a quick render and then lazy load the rest in immediately or as needed in same-sized chunks.

Upvotes: 2

Related Questions