New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

redundant rerendering on first time scroll #83

Closed
kamax1 opened this Issue Sep 15, 2016 · 5 comments

Comments

Projects
None yet
2 participants
@kamax1

kamax1 commented Sep 15, 2016

When scrolling the table for the first time the cluster rerenders and content has bad flashing effect.

I investigated the problem. In my case problem in method getRowsHeight at line
opts.item_height = nodes[Math.floor(nodes.length / 2)].offsetHeight;
opts.item_height equals 0 during initialization (but nodes exists)
so method getClusterNum return Infinity because of division by zero

i've added hot fix

    getClusterNum: function () {
      this.options.scroll_top = this.scroll_elem.scrollTop;
      if (this.options.cluster_height == this.options.block_height) return 0;
      return Math.floor(this.options.scroll_top / (this.options.cluster_height - this.options.block_height)) || 0;
    }

now it works fine for me. Would be cool if you can fix it right way.

I'm using clusterize as directive in Vuejs framework.

@NeXTs

This comment has been minimized.

Show comment
Hide comment
@NeXTs

NeXTs Sep 15, 2016

Owner

Hey

opts.item_height equals 0 during initialization (but nodes exists)

how this could be possible if nodes exists?
could you please create example at codepen?

Owner

NeXTs commented Sep 15, 2016

Hey

opts.item_height equals 0 during initialization (but nodes exists)

how this could be possible if nodes exists?
could you please create example at codepen?

@kamax1

This comment has been minimized.

Show comment
Hide comment
@kamax1

kamax1 Sep 15, 2016

Here is an example. http://codepen.io/anon/pen/ORNagp
I've figured out that it's caused by async loading of data and changing between different states.

kamax1 commented Sep 15, 2016

Here is an example. http://codepen.io/anon/pen/ORNagp
I've figured out that it's caused by async loading of data and changing between different states.

@NeXTs

This comment has been minimized.

Show comment
Hide comment
@NeXTs

NeXTs Sep 15, 2016

Owner

Whoa, great catch @kamax1 !

Owner

NeXTs commented Sep 15, 2016

Whoa, great catch @kamax1 !

@NeXTs NeXTs closed this in 8838614 Sep 15, 2016

@NeXTs

This comment has been minimized.

Show comment
Hide comment
@NeXTs

NeXTs Sep 15, 2016

Owner

Just pushed v0.17.1

Try this http://codepen.io/NeXTs/pen/GjkVoO?editors=1010

Pay attention how I changed html and loaded. If your version was important to you - use it, but there would be additional height determination (because until loaded is false - vue doesn't render table so Clusterize could not determine row's height. And will actually investigate row by triggering scroll (when obviously investigation of row height during .update is preferred))

Owner

NeXTs commented Sep 15, 2016

Just pushed v0.17.1

Try this http://codepen.io/NeXTs/pen/GjkVoO?editors=1010

Pay attention how I changed html and loaded. If your version was important to you - use it, but there would be additional height determination (because until loaded is false - vue doesn't render table so Clusterize could not determine row's height. And will actually investigate row by triggering scroll (when obviously investigation of row height during .update is preferred))

@kamax1

This comment has been minimized.

Show comment
Hide comment
@kamax1

kamax1 Sep 16, 2016

Thank you for the fast response. Works perfectly!

kamax1 commented Sep 16, 2016

Thank you for the fast response. Works perfectly!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment