From c4eb63c1d41c613ceacf668cd7d9443c4c823963 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 13 Nov 2016 13:13:36 +0100 Subject: [PATCH] Debounce autosuggestions requests --- .babelrc | 5 ++- .../features/compose/components/search.jsx | 2 ++ .../features/ui/components/compose_form.jsx | 2 ++ package.json | 2 ++ yarn.lock | 31 ++++++++++++++++++- 5 files changed, 40 insertions(+), 2 deletions(-) diff --git a/.babelrc b/.babelrc index 47c9aceb7..928d32e3b 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,7 @@ { "presets": ["es2015", "react"], - "plugins": ["transform-object-rest-spread"] + "plugins": [ + "transform-decorators-legacy", + "transform-object-rest-spread" + ] } diff --git a/app/assets/javascripts/components/features/compose/components/search.jsx b/app/assets/javascripts/components/features/compose/components/search.jsx index e81771e6a..93f7df775 100644 --- a/app/assets/javascripts/components/features/compose/components/search.jsx +++ b/app/assets/javascripts/components/features/compose/components/search.jsx @@ -2,6 +2,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Autosuggest from 'react-autosuggest'; import AutosuggestAccountContainer from '../containers/autosuggest_account_container'; +import { debounce } from 'react-decoration'; const getSuggestionValue = suggestion => suggestion.value; @@ -77,6 +78,7 @@ const Search = React.createClass({ this.props.onClear(); }, + @debounce(500) onSuggestionsFetchRequested ({ value }) { value = value.replace('#', ''); this.props.onFetch(value.trim()); diff --git a/app/assets/javascripts/components/features/ui/components/compose_form.jsx b/app/assets/javascripts/components/features/ui/components/compose_form.jsx index 20dc32709..aef228d58 100644 --- a/app/assets/javascripts/components/features/ui/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/ui/components/compose_form.jsx @@ -6,6 +6,7 @@ import ReplyIndicator from './reply_indicator'; import UploadButton from './upload_button'; import Autosuggest from 'react-autosuggest'; import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container'; +import { debounce } from 'react-decoration'; const getTokenForSuggestions = (str, caretPosition) => { let word; @@ -104,6 +105,7 @@ const ComposeForm = React.createClass({ this.props.onClearSuggestions(); }, + @debounce(500) onSuggestionsFetchRequested ({ value }) { const textarea = this.autosuggest.input; diff --git a/package.json b/package.json index d5429cb07..388024abd 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,10 @@ "sinon": "^1.17.6" }, "dependencies": { + "babel-plugin-transform-decorators-legacy": "^1.3.4", "emojione": "^2.2.6", "react-autosuggest": "^7.0.1", + "react-decoration": "^1.4.0", "react-motion": "^0.4.5", "react-responsive": "^1.1.5", "react-router-scroll": "^0.3.2" diff --git a/yarn.lock b/yarn.lock index 735787302..5b4230778 100644 --- a/yarn.lock +++ b/yarn.lock @@ -304,6 +304,10 @@ asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" +autobind-decorator@1.3.3: + version "1.3.3" + resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-1.3.3.tgz#41b1915ee742859c872b5d1743d10745254b83b4" + autoprefixer@^6.3.1, autoprefixer@^6.3.7: version "6.5.0" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.0.tgz#910de0aa0f22af4c7d50367cbc9d4d412945162f" @@ -519,6 +523,10 @@ babel-plugin-syntax-class-properties@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de" +babel-plugin-syntax-decorators@^6.1.18: + version "6.13.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b" + babel-plugin-syntax-exponentiation-operator@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de" @@ -555,6 +563,14 @@ babel-plugin-transform-class-properties@6.11.5: babel-plugin-syntax-class-properties "^6.8.0" babel-runtime "^6.9.1" +babel-plugin-transform-decorators-legacy: + version "1.3.4" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.4.tgz#741b58f6c5bce9e6027e0882d9c994f04f366925" + dependencies: + babel-plugin-syntax-decorators "^6.1.18" + babel-runtime "^6.2.0" + babel-template "^6.3.0" + babel-plugin-transform-es2015-arrow-functions@^6.3.13: version "6.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d" @@ -931,7 +947,14 @@ babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.5.0, babel-runtime core-js "^2.4.0" regenerator-runtime "^0.9.5" -babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0: +babel-runtime@^6.2.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.18.0.tgz#0f4177ffd98492ef13b9f823e9994a02584c9078" + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.9.5" + +babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.3.0, babel-template@^6.8.0: version "6.16.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca" dependencies: @@ -3841,6 +3864,12 @@ react-autowhatever@^7.0.0: react-themeable "^1.1.0" section-iterator "^2.0.0" +react-decoration: + version "1.4.0" + resolved "https://registry.yarnpkg.com/react-decoration/-/react-decoration-1.4.0.tgz#54c30aed3aa81d1fe8f844b37db0a536e4190da9" + dependencies: + autobind-decorator "1.3.3" + react-deep-force-update@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"