Blueprint: Spinner component gets stucked

[NachoJusticia]

Environment

• __Package version(s)__: 3.0.0-beta.1
• __Browser and OS versions__: Google Chrome 69.0.3497.92, macOS High Sierra 10.13.3

Steps to reproduce

• Use Blueprint Spinner component when js main thread needs to do some calculations.

Actual behavior

The Spinner gets stucked.

Expected behavior

The Spinner should spin.

Possible solution

Any idea with that? I would like to submit a PR but I don't know how to approach this issue I'm having...

[giladgray]

@NachoJusticia before you do anything, upgrade to 3.6.0. Spinner has changed, this is probably fixed.

Package version(s): 3.0.0-beta.1

[NachoJusticia]

I'm sorry @giladgray , I am using v3.0.0-beta.1of blueprintjs, so I am using blueprintjs/core 3.6.0 version

[giladgray]

i don't follow. what do mean "of blueprintjs?" if you're using core 3.6.0 then you're using 3.6.0.

but also, if the JS thread itself is blocked on computation then there's simply nothing to be done on the blueprint side. can you post a video or a link to a sandbox with a reliable repro?

[NachoJusticia]

@giladgray I will try to create two little projects and try to block main javascript thread, so we can make a comparison between blueprint spinner and a spinner that does not use _svg html element_ + _css_ animations but just _css_.

[NachoJusticia]

Is it possible to install blueprintjs via CDNJS? I am trying to configure a sandbox environment in jsFiddle.
I've taken a look at this blueprint issue but it's very old and I ask myself it it would be possible to install the new version through any cdn

[giladgray]

It most certainly is but there's a link to a CodeSandbox in both the README and the docs homepage.

[NachoJusticia]

I have prepared the following sandbox project in which I compare Blueprint's Spinner and a Semantic-ui based Spinner. You can play with the number of the foor loop iterations in order to block the js thread.

I post here a gif to show the result:

[giladgray]

I cannot reproduce the result. I see an entirely blank page while the promises run then a quick flash of spinners then the "resolved" message.

[giladgray]

Actually! Your sandbox was using a core 3.0.0-beta, but i have recently reworked spinners so they have DOM wrapper elements (#2868) and now the spinner spins happily alongside the other one.

Please upgrade to the latest version. I already suggested this above.

https://codesandbox.io/s/1rk2w99p4j

[NachoJusticia]

I had to make changes in the code (for instance update the number of iterations of the for loop) and click save in order to see the spinners instead of the blank page. I the blank page is showed because codesandbox is blocked too...

I am already using the new version of the Spinner in my project and when the js thread is blocked the Blueprint Spinner does not spin but Semantic-ui based does spin.

I think that in your codesandbox both spiners are not working until the "All promises resolved!" message is shown (so the JS thread is unblocked), don't you think so?

[giladgray]

I'm sorry mate but all signs point to you using an older version of core. Please ensure that you are using the actual latest version. In my sandbox above, I was able to get a consistently spinning spinner exactly identical to semantic-ui because the latest versions uses CSS animations on a DOM element.

[giladgray]

the most we can hope for is a consistent experience between the two libraries. if nothing renders cuz the JS thread is blocked, that's on the browser not on the library.

[NachoJusticia]

Ok! No worries and thanks for your patience 👍

[giladgray]

for sure! this was a fun one to track down.