Render table component with 500 rows block browser?

Question

I have a component which render 500+ data into a HTML table rows

It take almost 3 seconds to render and the browser is completed blocked.

I cannot use pagination because the client want it excel-like and it is a static site.

Is there a way to solve this issue? For example create a loading state before the component is rendered?

Answer 1

我猜500多行不适合屏幕（视口），所以你需要使用滚动。

有一个名为ember-in-viewport的插件。如果组件不在视口中，它使您能够不渲染组件。

这是sample twiddle。在my-component中将my-proxy-component更改为applicaiton.hbs即可查看效果。

Answer 2

不要一次渲染所有对象，只需加载视口内可见的内容即可。已经有不同的Ember插件完全符合你的需要。

您可以使用的一些插件：

• Vertical Collection
• Ember Infinity
• Ember Light Table

P.S。当然你也可以自己创建一个组件/插件并使用建议的ember-in-viewport插件@ykaragol，但我觉得你的情况太过分了。