Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

fix: Add debounce for toggle-filter to avoid lag

Browse Source
This commit is contained in:
Ivar Conradi Østhus 2020-01-26 12:05:38 +01:00
parent 20a7323916
commit 73f2cebc7a
3 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -53,6 +53,7 @@
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^2.1.1",
"debounce": "^1.2.0",
"debug": "^4.1.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.0",

17
frontend/src/component/feature/list-component.jsx
View File

@ -1,8 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import Feature from './feature-list-item-component';
import { debounce } from "debounce";
import { Link } from 'react-router-dom';
import { Icon, FABButton, Textfield, Menu, MenuItem, Card, CardActions, List } from 'react-mdl';
import Feature from './feature-list-item-component';
import { MenuItemWithIcon, DropdownButton, styles as commonStyles } from '../common';
import styles from './feature.scss';
import { CREATE_FEATURE } from '../../permissions';
@ -21,6 +22,14 @@ export default class FeatureListComponent extends React.Component {
hasPermission: PropTypes.func.isRequired,
};
constructor(props) {
super();
this.state = {
filter: props.settings.filter,
updateFilter: debounce(props.updateSetting.bind(this, 'filter'), 200)
}
}
componentDidMount() {
if (this.props.fetchFeatureToggles) {
this.props.fetchFeatureToggles();
@ -34,7 +43,9 @@ export default class FeatureListComponent extends React.Component {
}
setFilter(v) {
this.props.updateSetting('filter', typeof v === 'string' ? v : '');
const value = typeof v === 'string' ? v : '';
this.setState({filter: value});
this.state.updateFilter(value)
}
setSort(v) {
@ -51,7 +62,7 @@ export default class FeatureListComponent extends React.Component {
<div className={styles.toolbar}>
<Textfield
floatingLabel
value={settings.filter}
value={this.state.filter}
onChange={e => {
this.setFilter(e.target.value);
}}

5
frontend/yarn.lock
View File

@ -2683,6 +2683,11 @@ date-now@^0.1.4:
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
debounce@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"