[Drawer] Poor performance on state change

[jasan-s]

Problem description

Once i tap the the drawer button there is a significant lag until a menu appears. it does not feel fluid or native like. I'm assuming you used the react drawer component on your own site as well.

Steps to reproduce

open http://www.material-ui.com/#/ in chrome browser mobile on mobile device and touch the top left menu drawerbutton.

In comparison this Drawer demo( https://googlechrome.github.io/ui-element-samples/side-nav/ ) runs native like fluid on my chrome mobile browser.

[joeblew99]

Gee it is smooth. Its kind of a paradox how with all the engineering that goes into react and material UI, that this is just so so fast.

Its es2015 and no libs. Just pure JS like people wrote 10 years ago.

Is this part of the reason its so fast ?

[mbrookes]

@jasan-s You've deleted part of the issue template, so I don't know what browser you're using, but it's silky smooth when using the button in Mobile Safari, IOS 9.3.2 on an iPhone 5s.

@joeblew99 The google Drawer demo is using CSS, not pure JS. Unfortunately it doesn't work in IOS, so I can't comment on its performance or features.

[mpontikes]

Should this issue be closed in favor of #42 ?

[Simran-B]

It is okay at first on my Nexus 5 (4x2.27GHz), Android 6.0.1, Chrome for Android v52, but breaks later on. There's a small delay before the drawer opens when I tap the hamburger icon on the homepage of MUI, but it is acceptable. If I click outside the drawer, it closes as it should.

The problems start after I navigate to a component's page. If I tap the hamburger icon again, there's a huge delay before it opens. Furthermore, it disappears unexpectedly on scrolling, and (sometimes?) automatically after ~2s. If I drag-open it instead, there's also a delay (I have to tap-and-hold on the left screen border, wait for a second, then drag my finger to the right), but the drawer menu is usable (doesn't auto-close) and can be properly dismissed.

Here's a video: https://youtu.be/pyCTqpRMwGc (see the drawer disappear all of the sudden at 0:28)

[oliviertassinari]

The problems start after I navigate to a component's page.

That sounds like an issue with how the documentation is implemented. It's not really performant on the master branch as we parse the source code to extract the propTypes documentation, also, we rerender quite some stuff. Things has been improved.

master

next

[oliviertassinari]

I have been covered the documentation side of the issue. It's most likely the same one on users side.
Unless users are using a pure logic preventing useless rendering of the Drawer children, they can expect a significant lag. The larger the Drawer children component is, the bigger the lag will be.