Giters

dyo / dyo

Dyo is a JavaScript library for building user interfaces.

Home Page:https://dyo.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problems when nesting Suspense elements

mcjazzyfunky opened this issue · comments

commented

The other day, I've read somewhere that implementing support for nested suspense elements is quite a challenge for UI library authors.

So I was curious whether this is working fine with Dyo and gave it a try.
Did not behave as I had expected.
https://codesandbox.io/s/hardcore-tharp-b5kux

I would expect to see

  • the text 'Loading (outer suspense)...' for 1500 ms
  • then a combination of the text 'Loading (inner suspense)...' plus a horizontal rule plus a random number in front of a button for 2500 ms
  • then (finally) a combination of button with a random number plus a horizontal rule plus a different random number in front of a button number
commented

Looks like a bug.

commented

Wow, that was fast 😃
But unfortunatelly it's still not working 100% fine yet.

Please see this demo here (it's the same as before but with Dyo version 2.0.6):
https://codesandbox.io/s/quirky-brook-opzoh

In the first 4000 ms it shows the following:

Loading (inner suspense)...
Loading (outer suspense)...

I'm quite sure that's wrong.
Like written above, I would expect to see:

  • the text 'Loading (outer suspense)...' for 1500 ms
  • then a combination of the text 'Loading (inner suspense)...' plus a horizontal rule plus a random number in front of a button for 2500 ms
  • then (finally) a combination of button with a random number plus a horizontal rule plus a different random number in front of a button number

[Edit] The behavior after that 4000 ms when you click on the buttons looks good to me.
After the 4000 ms if you click on the top button and directly after that on the bottom button you see again the following - which seems to be wrong:

Loading (inner suspense)...
Loading (outer suspense)...

I think, you should only see Loading (outer suspense)... for the next 1500 ms:

commented

Great, thanks.
Sorry for being annoying, but there's still one tiny case where things are not working 100% fine IMHO.
Please see again the following demo (same as above but with the latest Dyo version):
https://codesandbox.io/s/wonderful-framework-36u1f?file=/src/index.jsx

Whenever you click on the bottom button you should see Loading (outer suspense)..., which seems to work fine normally, but not in the following case:

Everything is working fine after 4 seconds, but when the app is (re)loaded if you click on the bottom button within the time span 1500 ms to 4000 ms then you do NOT see that Loading (outer suspense)... as expected.

PS: In case you see this "No available storage method found" error (I do not know what's the reason for that) then please just reload the whole sandbox.

commented

Fixed, and thanks — this issue really helped iron out the mentioned quirks with the suspense implementation.

commented

Many thanks, everything seems to work now as expected.