Render table component with 500 browser lock lines?
I have a component that displays 500+ data into rows of an HTML table
It takes almost 3 seconds to render and the browser lock is complete.
I cannot use pagination because the client wants it to be excellent and this is a static site.
Is there a way to solve this problem? For example, create a loading state before rendering the component?
source to share
I think over 500 lines are not suitable for the screen (viewport), so you need to use scrolling.
There is an addon named ember-in-viewport
. This gives you the option of not displaying the component if it is not in the viewport.
Here is a sample twiddle . Change my-component
to my-proxy-component
in applicaiton.hbs
to see the effect.
source to share
Don't display all objects at once, just load what is visible inside your viewport. There are already various Ember addons out there that do exactly what you need.
Some add-ons you could use:
PS Of course you could also create the component / addon yourself and use the ember-in-viewport addon @ykaragol, but I think there is an overflow in your situation.
source to share