Lazy Loading fuse-worker and fixed some potential timing issues when it's slow. Also keep last result while typing.

pull/3819/head
Taloth Saldono 4 years ago
parent 4559eed0ec
commit 1e98002b8f

@ -4,15 +4,15 @@
}
.loading {
margin-top: 18px;
margin-bottom: 18px;
text-align: center;
display: inline-block;
position: absolute;
margin-left: 5px;
}
.ripple {
composes: ripple from '~Components/Loading/LoadingIndicator.css';
border: 2px solid $toolbarColor;
border: 1px solid $toolbarColor;
}
.input {

@ -10,9 +10,7 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import FuseWorker from './fuse.worker';
import styles from './SeriesSearchInput.css';
const LOADING_TYPE = 'suggestionsLoading';
const ADD_NEW_TYPE = 'addNew';
const workerInstance = new FuseWorker();
class SeriesSearchInput extends Component {
@ -23,6 +21,7 @@ class SeriesSearchInput extends Component {
super(props, context);
this._autosuggest = null;
this._worker = null;
this.state = {
value: '',
@ -32,7 +31,23 @@ class SeriesSearchInput extends Component {
componentDidMount() {
this.props.bindShortcut(shortcuts.SERIES_SEARCH_INPUT.key, this.focusInput);
workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
}
componentWillUnmount() {
if (this._worker) {
this._worker.removeEventListener('message', this.onSuggestionsReceived, false);
this._worker.terminate();
this._worker = null;
}
}
getWorker() {
if (!this._worker) {
this._worker = new FuseWorker();
this._worker.addEventListener('message', this.onSuggestionsReceived, false);
}
return this._worker;
}
//
@ -55,6 +70,15 @@ class SeriesSearchInput extends Component {
return (
<div className={styles.sectionTitle}>
{section.title}
{
section.loading &&
<LoadingIndicator
className={styles.loading}
rippleClassName={styles.ripple}
size={20}
/>
}
</div>
);
}
@ -72,16 +96,6 @@ class SeriesSearchInput extends Component {
);
}
if (item.type === LOADING_TYPE) {
return (
<LoadingIndicator
className={styles.loading}
rippleClassName={styles.ripple}
size={30}
/>
);
}
return (
<SeriesSearchResult
{...item.item}
@ -98,7 +112,8 @@ class SeriesSearchInput extends Component {
reset() {
this.setState({
value: '',
suggestions: []
suggestions: [],
loading: false
});
}
@ -114,6 +129,15 @@ class SeriesSearchInput extends Component {
}
onKeyDown = (event) => {
if (event.shiftKey || event.altKey || event.ctrlKey) {
return;
}
if (event.key === 'Escape') {
this.reset();
return;
}
if (event.key !== 'Tab' && event.key !== 'Enter') {
return;
}
@ -154,35 +178,74 @@ class SeriesSearchInput extends Component {
}
onSuggestionsFetchRequested = ({ value }) => {
this.setState({
suggestions: [
{
type: LOADING_TYPE,
title: value
}
]
});
if (!this.state.loading) {
this.setState({
loading: true
});
}
this.requestSuggestions(value);
};
requestSuggestions = _.debounce((value) => {
const payload = {
value,
series: this.props.series
};
if (!this.state.loading) {
return;
}
workerInstance.postMessage(payload);
}, 250);
const requestLoading = this.state.requestLoading;
onSuggestionsReceived = (message) => {
this.setState({
suggestions: message.data
requestValue: value,
requestLoading: true
});
if (!requestLoading) {
const payload = {
value,
series: this.props.series
};
this.getWorker().postMessage(payload);
}
}, 250);
onSuggestionsReceived = (message) => {
const {
value,
suggestions
} = message.data;
if (!this.state.loading) {
this.setState({
requestValue: null,
requestLoading: false
});
} else if (value === this.state.requestValue) {
this.setState({
suggestions,
requestValue: null,
requestLoading: false,
loading: false
});
} else {
this.setState({
suggestions,
requestLoading: true
});
const payload = {
value: this.state.requestValue,
series: this.props.series
};
this.getWorker().postMessage(payload);
}
}
onSuggestionsClearRequested = () => {
this.setState({
suggestions: []
suggestions: [],
loading: false
});
}
@ -200,14 +263,16 @@ class SeriesSearchInput extends Component {
render() {
const {
value,
loading,
suggestions
} = this.state;
const suggestionGroups = [];
if (suggestions.length) {
if (suggestions.length || loading) {
suggestionGroups.push({
title: 'Existing Series',
loading,
suggestions
});
}

@ -17,7 +17,7 @@ function SeriesSearchResult(props) {
let alternateTitle = null;
let tag = null;
if (match.key === 'alternateTitles.cleanTitle') {
if (match.key === 'alternateTitles.title') {
alternateTitle = alternateTitles[match.arrayIndex];
} else if (match.key === 'tags.label') {
tag = tags[match.arrayIndex];

@ -49,7 +49,7 @@ function getSuggestions(series, value) {
return suggestions;
}
self.addEventListener('message', (e) => {
onmessage = function(e) {
if (!e) {
return;
}
@ -59,5 +59,12 @@ self.addEventListener('message', (e) => {
value
} = e.data;
self.postMessage(getSuggestions(series, value));
});
const suggestions = getSuggestions(series, value);
const results = {
value,
suggestions
};
self.postMessage(results);
};

Loading…
Cancel
Save