Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Throttle the active toc instead of debouncing #12543

Merged
merged 1 commit into from
Aug 15, 2018
Merged

[docs] Throttle the active toc instead of debouncing #12543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/src/modules/components/AppTableOfContents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import Link from 'docs/src/modules/components/Link';
import marked from 'marked';
import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
import throttle from 'lodash/throttle';
import EventListener from 'react-event-listener';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
Expand Down Expand Up @@ -69,9 +69,9 @@ const styles = theme => ({
});

class AppTableOfContents extends React.Component {
handleScroll = debounce(() => {
handleScroll = throttle(() => {
this.findActiveIndex();
}, 83); // Corresponds to 5 frames at 60 Hz.
}, 166); // Corresponds to 10 frames at 60 Hz.

constructor(props) {
super(props);
Expand Down Expand Up @@ -108,7 +108,7 @@ class AppTableOfContents extends React.Component {
}

componentWillUnmount() {
this.handleScroll.clear();
this.handleScroll.cancel();
}

findActiveIndex = () => {
Expand Down
2 changes: 2 additions & 0 deletions docs/src/pages/getting-started/faq/faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ Overall, it's simple to recover from this problem by wrapping each Material-UI a

[A resolution example](/customization/css-in-js#jssprovider). The last part of any solution will vary based on what bundler you are using, but the overall goal is to ensure the common module that contains the first snippet above only gets loaded and run once.

⚠️ You are in the hurry? Rest assured, we provide an option to make the class names **deterministic** as a quick escape hatch: [`dangerouslyUseGlobalCSS`](/customization/css-in-js#global-css).

## Why do the fixed positioned elements move when a modal is opened?

We block the scroll as soon as a modal is opened.
Expand Down