[MVP] Toggle suspense

[gaearon]

To be used with facebook/react#15232.

Adds a toolbar button that toggles Suspense boundary state.

Some open questions:

• This is intentionally underdesigned because I'd like some feedback on how you'd change the UI. We can put it somewhere else. Maybe on fallback prop?
• There's a concern that it won't be prominent, and people who need it the most won't find it. But it needs to be highly visible since it's useful and easy to miss (as it doesn't apply to other elements).
• We might need to indicate that we're currently faking the fallback. Otherwise you might not realize or understand it.
• Should we hide the subtree for trees in fallback mode? It's probably not useful and can be confusing when you're trying to remember which Suspenses have been toggled.
• Should there be an easy way to untoggle them all? Should toggled ones look differently in the tree?

Out of scope:

• I think ideally we'd want a dedicated tab that does more. Like whole loading sequence inspection. Maybe it could also show just the Suspense elements. Otherwise the process of finding the loading states in a large tree is pretty confusing. You don't know how to jump to the upper one or the next ones. My ideal UI is probably just a tree view of Suspenses alone where "collapsing" and "expanding" nodes toggles the fallbacks. This PR is just a first step to get the ball rolling.

[bvaughn]

Haven't looked at the code yet, but the demo looks slick!

This is intentionally underdesigned because I'd like some feedback on how you'd change the UI. We can put it somewhere else. Maybe on fallback prop?

Yeah, or maybe we could show a custom (fake) boolean prop e.g. suspended that you toggle like you toggle other boolean props.

There's a concern that it won't be prominent, and people who need it the most won't find it. But it needs to be highly visible since it's useful and easy to miss (as it doesn't apply to other elements).

That's fair. We'll need to strike a balance that accounts for discoverability and ease-of-access, given limited space.

We might need to indicate that we're currently faking the fallback. Otherwise you might not realize or understand it.

Maybe we could color the <Suspense> element in the tree in a different way? (I'm wary of relying on an indicator in the page.)

Should we hide the subtree for trees in fallback mode? It's probably not useful and can be confusing when you're trying to remember which Suspenses have been toggled.

I assume you mean within the "Elements" panel? Hm. The tree-to-flat-list logic is kind of complicated, and pretty performance sensitive. I'd kind of prefer not to monkey with it too much unless necessary. Maybe we could do something like dim descendants or something though.

Should there be an easy way to untoggle them all?

Hm...what's the use case here? Why are people using this feature? My assumption: Just to visually test how their app looks in various stages of loading. I'm not convinced that "untoggle all" is a necessary interaction for this use case.

Should toggled ones look differently in the tree?

Ah, yes. I think maybe so.

[bvaughn]

I was excited to try this out on the suspense boundaries in DevTools itself, but I forgot to make a build of React from facebook/react#15232 and it crashed. We'll need to figure out a feature detection strategy for this.

[bvaughn]

Ah, nice TODO. This should probably look for a new injected flag that signals whether the current version and build supports the override behavior.

[bvaughn]

I'm curious: why not inject a method like e.g. suspendFiber(true) that could be used as our signal for support as well as our method for re-rendering?

[gaearon]

I want to preserve our ability to do filtering based on something other than just putting it in a Set.

[bvaughn]

Built the profiler demo page with branch of React so I could test this on the profiler itself:

Pretty slick!

It actually helped me realize that the UI for that first fallback isn't great, and I was able to iterate on it in the Chrome Elements CSS tools and make it better (a450a23) 😄

[bvaughn]

😆 You love this emoji

[bvaughn]

Wherever we end up placing this toggle, we should also:

• Show it as a toggle (with a clear on/off state).
• Only show it if the Suspense boundary has actually resolved. (Updates that trigger new suspends might be a little tricky, but maybe we can just ignore that.)

[gaearon]

#61 addresses the concerns.