[Backdrop] Doesn't appear before JS is loaded

[btmorex]

I wanted to render Backdrop server side and use it as sort of a loading indicator before the javascript is downloaded. This does not work; I guess because of the Fade wrapping it. Setting transitionDuration to 0 doesn't help either.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

[oliviertassinari]

Tip: check the transition appearing props.

It's something we could better document. It sounds like a common use case.

[btmorex]

Thanks! Even with your tip that took me ages to figure out. The solution if anyone else runs across this issue is to set appear to false on Backdrop (it gets passed from Backdrop to Fade to Transition).

[oliviertassinari]

@btmorex Agree!

[Josh-Weston]

Thoughts on adding Fade as an inherited component for Backdrop?

  describeConformance(<Backdrop open />, () => ({
    classes,
    inheritComponent: Fade,
    mount,
    refInstanceof: window.HTMLDivElement,
    skip: [
      'componentProp',
      // react-transition-group issue
      'reactTestRenderer',
    ],
  }));

This would allow someone to traverse from: Backdrop to Fade to Transition within the API docs.

The following would be added to Backdrop's API docs:

[oliviertassinari]

@Josh-Weston Smart, do you want. to go for it? :)