search

0xB10C / memo

Bitcoin mempool.observer Website
https://mempool.observer/
GNU Affero General Public License v3.0
71 stars 23 forks source link

Chart doesn't render if tab is not active #14

Closed timothyylim closed 5 years ago

timothyylim commented 5 years ago

c3.js throws the error:

c3.min.js:2 Uncaught INDEX_SIZE_ERR

It appears to have been reported and fixed:

https://github.com/c3js/c3/issues/2458

But the issue still persists.

0xB10C commented 5 years ago

Work around with a 75ms timeout described here (however it's not clear where the code is) https://github.com/c3js/c3/pull/2495#issuecomment-447105194

0xB10C commented 5 years ago

Can confirm that it's definitely a issue in Firefox. Could not reproduce in Chrome.

timothyylim commented 5 years ago

I’m seeing it on chrome.

0xB10C commented 5 years ago

With 1df59da the chart is only redrawn if the browser tab is active. @timothyylim please check if it works on your side too.

timothyylim commented 5 years ago

Tested and works well. Well done @0xB10C 👍

0xB10C commented 5 years ago

I think we need some sort of redraw on tab focus. At the moment the old chart is shown. The user doesn't see it's old.

Automatically redraw on tab focus would be optimal. If that's not possible (e.g. browser restrictions), there should be some sort of "hey, I've loaded new data while you were gone. draw-it-now-button".

timothyylim commented 5 years ago

Will look into and make a PR.

timothyylim commented 5 years ago

Possible solution: https://stackoverflow.com/a/1760283

pasting here for future reference.

0xB10C commented 5 years ago

Possible solution: https://stackoverflow.com/a/1760283

Looked into this. The proposed answer doesn't seem to work reliable (at least for me).

Since we are using the Page Visibility API already to not redraw a chart if the tab is not active I've opted to use the Document: visibilitychange event to redraw all visible charts.

This works great as it:

  1. redraws the chart when the tab becomes active
  2. even works when the user opens the site in a new tab and later switches to it (i.e. when the site hasn't been drawn before)

This is implemented in 52cda1310d208e7012a8f61a6cde181322a7f44b.