mirror of
https://github.com/Radarr/Radarr.git
synced 2024-09-19 07:52:33 +02:00
Lazy Loading fuse-worker and fixed some potential timing issues
Fixes #4765 Fixes #4766 Co-Authored-By: taloth <taloth@users.noreply.github.com>
This commit is contained in:
parent
39a1dbf1d1
commit
79a96bb43f
@ -4,15 +4,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
margin-top: 18px;
|
position: absolute;
|
||||||
margin-bottom: 18px;
|
display: inline-block;
|
||||||
text-align: center;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ripple {
|
.ripple {
|
||||||
composes: ripple from '~Components/Loading/LoadingIndicator.css';
|
composes: ripple from '~Components/Loading/LoadingIndicator.css';
|
||||||
|
|
||||||
border: 2px solid $toolbarColor;
|
border: 1px solid $toolbarColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
|
@ -11,9 +11,7 @@ import FuseWorker from './fuse.worker';
|
|||||||
import MovieSearchResult from './MovieSearchResult';
|
import MovieSearchResult from './MovieSearchResult';
|
||||||
import styles from './MovieSearchInput.css';
|
import styles from './MovieSearchInput.css';
|
||||||
|
|
||||||
const LOADING_TYPE = 'suggestionsLoading';
|
|
||||||
const ADD_NEW_TYPE = 'addNew';
|
const ADD_NEW_TYPE = 'addNew';
|
||||||
const workerInstance = new FuseWorker();
|
|
||||||
|
|
||||||
class MovieSearchInput extends Component {
|
class MovieSearchInput extends Component {
|
||||||
|
|
||||||
@ -24,6 +22,7 @@ class MovieSearchInput extends Component {
|
|||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this._autosuggest = null;
|
this._autosuggest = null;
|
||||||
|
this._worker = null;
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
value: '',
|
value: '',
|
||||||
@ -33,7 +32,23 @@ class MovieSearchInput extends Component {
|
|||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.props.bindShortcut(shortcuts.MOVIE_SEARCH_INPUT.key, this.focusInput);
|
this.props.bindShortcut(shortcuts.MOVIE_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;
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -56,6 +71,15 @@ class MovieSearchInput extends Component {
|
|||||||
return (
|
return (
|
||||||
<div className={styles.sectionTitle}>
|
<div className={styles.sectionTitle}>
|
||||||
{section.title}
|
{section.title}
|
||||||
|
|
||||||
|
{
|
||||||
|
section.loading &&
|
||||||
|
<LoadingIndicator
|
||||||
|
className={styles.loading}
|
||||||
|
rippleClassName={styles.ripple}
|
||||||
|
size={20}
|
||||||
|
/>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -73,16 +97,6 @@ class MovieSearchInput extends Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.type === LOADING_TYPE) {
|
|
||||||
return (
|
|
||||||
<LoadingIndicator
|
|
||||||
className={styles.loading}
|
|
||||||
rippleClassName={styles.ripple}
|
|
||||||
size={30}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MovieSearchResult
|
<MovieSearchResult
|
||||||
{...item.item}
|
{...item.item}
|
||||||
@ -99,7 +113,8 @@ class MovieSearchInput extends Component {
|
|||||||
reset() {
|
reset() {
|
||||||
this.setState({
|
this.setState({
|
||||||
value: '',
|
value: '',
|
||||||
suggestions: []
|
suggestions: [],
|
||||||
|
loading: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,6 +130,15 @@ class MovieSearchInput extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onKeyDown = (event) => {
|
onKeyDown = (event) => {
|
||||||
|
if (event.shiftKey || event.altKey || event.ctrlKey) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
this.reset();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (event.key !== 'Tab' && event.key !== 'Enter') {
|
if (event.key !== 'Tab' && event.key !== 'Enter') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -155,35 +179,74 @@ class MovieSearchInput extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onSuggestionsFetchRequested = ({ value }) => {
|
onSuggestionsFetchRequested = ({ value }) => {
|
||||||
|
if (!this.state.loading) {
|
||||||
this.setState({
|
this.setState({
|
||||||
suggestions: [
|
loading: true
|
||||||
{
|
|
||||||
type: LOADING_TYPE,
|
|
||||||
title: value
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
this.requestSuggestions(value);
|
this.requestSuggestions(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
requestSuggestions = _.debounce((value) => {
|
requestSuggestions = _.debounce((value) => {
|
||||||
|
if (!this.state.loading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const requestLoading = this.state.requestLoading;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
requestValue: value,
|
||||||
|
requestLoading: true
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!requestLoading) {
|
||||||
const payload = {
|
const payload = {
|
||||||
value,
|
value,
|
||||||
movies: this.props.movies
|
movies: this.props.movies
|
||||||
};
|
};
|
||||||
|
|
||||||
workerInstance.postMessage(payload);
|
this.getWorker().postMessage(payload);
|
||||||
|
}
|
||||||
}, 250);
|
}, 250);
|
||||||
|
|
||||||
onSuggestionsReceived = (message) => {
|
onSuggestionsReceived = (message) => {
|
||||||
|
const {
|
||||||
|
value,
|
||||||
|
suggestions
|
||||||
|
} = message.data;
|
||||||
|
|
||||||
|
if (!this.state.loading) {
|
||||||
this.setState({
|
this.setState({
|
||||||
suggestions: message.data
|
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,
|
||||||
|
movies: this.props.movies
|
||||||
|
};
|
||||||
|
|
||||||
|
this.getWorker().postMessage(payload);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onSuggestionsClearRequested = () => {
|
onSuggestionsClearRequested = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
suggestions: []
|
suggestions: [],
|
||||||
|
loading: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -201,14 +264,16 @@ class MovieSearchInput extends Component {
|
|||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
value,
|
value,
|
||||||
|
loading,
|
||||||
suggestions
|
suggestions
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const suggestionGroups = [];
|
const suggestionGroups = [];
|
||||||
|
|
||||||
if (suggestions.length) {
|
if (suggestions.length || loading) {
|
||||||
suggestionGroups.push({
|
suggestionGroups.push({
|
||||||
title: 'Existing Movie',
|
title: 'Existing Movie(s)',
|
||||||
|
loading,
|
||||||
suggestions
|
suggestions
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -47,7 +47,7 @@ function getSuggestions(movies, value) {
|
|||||||
return suggestions;
|
return suggestions;
|
||||||
}
|
}
|
||||||
|
|
||||||
self.addEventListener('message', (e) => {
|
onmessage = function(e) {
|
||||||
if (!e) {
|
if (!e) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -57,5 +57,12 @@ self.addEventListener('message', (e) => {
|
|||||||
value
|
value
|
||||||
} = e.data;
|
} = e.data;
|
||||||
|
|
||||||
self.postMessage(getSuggestions(movies, value));
|
const suggestions = getSuggestions(movies, value);
|
||||||
});
|
|
||||||
|
const results = {
|
||||||
|
value,
|
||||||
|
suggestions
|
||||||
|
};
|
||||||
|
|
||||||
|
self.postMessage(results);
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user