mirror of
https://github.com/stashapp/stash.git
synced 2025-12-18 04:44:37 +03:00
Thumbnail scrubber improvements (#4081)
* Remove deps from useDebounce hook * Add useThrottle hook * Throttle preview scrubber * Scrubber improvements
This commit is contained in:
@@ -229,13 +229,9 @@ export const FilterSelectComponent = <
|
||||
};
|
||||
|
||||
const debounceDelay = 100;
|
||||
const debounceLoadOptions = useDebounce(
|
||||
(inputValue, callback) => {
|
||||
loadOptions(inputValue).then(callback);
|
||||
},
|
||||
[loadOptions],
|
||||
debounceDelay
|
||||
);
|
||||
const debounceLoadOptions = useDebounce((inputValue, callback) => {
|
||||
loadOptions(inputValue).then(callback);
|
||||
}, debounceDelay);
|
||||
|
||||
return (
|
||||
<SelectComponent<T, IsMulti>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Icon } from "../Icon";
|
||||
import { LoadingIndicator } from "../LoadingIndicator";
|
||||
import { useDirectory } from "src/core/StashService";
|
||||
import { faEllipsis, faTimes } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useDebouncedSetState } from "src/hooks/debounce";
|
||||
import { useDebounce } from "src/hooks/debounce";
|
||||
|
||||
interface IProps {
|
||||
currentDirectory: string;
|
||||
@@ -44,7 +44,7 @@ export const FolderSelect: React.FC<IProps> = ({
|
||||
(error && hideError ? [] : defaultDirectoriesOrEmpty)
|
||||
: defaultDirectoriesOrEmpty;
|
||||
|
||||
const debouncedSetDirectory = useDebouncedSetState(setDirectory, 250);
|
||||
const debouncedSetDirectory = useDebounce(setDirectory, 250);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentDirectory !== directory) {
|
||||
|
||||
@@ -29,7 +29,7 @@ import { objectTitle } from "src/core/files";
|
||||
import { galleryTitle } from "src/core/galleries";
|
||||
import { TagPopover } from "../Tags/TagPopover";
|
||||
import { defaultMaxOptionsShown, IUIConfig } from "src/core/config";
|
||||
import { useDebouncedSetState } from "src/hooks/debounce";
|
||||
import { useDebounce } from "src/hooks/debounce";
|
||||
import { Placement } from "react-bootstrap/esm/Overlay";
|
||||
import { PerformerIDSelect } from "../Performers/PerformerSelect";
|
||||
|
||||
@@ -352,7 +352,7 @@ export const GallerySelect: React.FC<ITitledSelect> = (props) => {
|
||||
value: g.id,
|
||||
}));
|
||||
|
||||
const onInputChange = useDebouncedSetState(setQuery, 500);
|
||||
const onInputChange = useDebounce(setQuery, 500);
|
||||
|
||||
const onChange = (selectedItems: OnChangeValue<Option, boolean>) => {
|
||||
const selected = getSelectedItems(selectedItems);
|
||||
@@ -403,7 +403,7 @@ export const SceneSelect: React.FC<ITitledSelect> = (props) => {
|
||||
value: s.id,
|
||||
}));
|
||||
|
||||
const onInputChange = useDebouncedSetState(setQuery, 500);
|
||||
const onInputChange = useDebounce(setQuery, 500);
|
||||
|
||||
const onChange = (selectedItems: OnChangeValue<Option, boolean>) => {
|
||||
const selected = getSelectedItems(selectedItems);
|
||||
@@ -453,7 +453,7 @@ export const ImageSelect: React.FC<ITitledSelect> = (props) => {
|
||||
value: s.id,
|
||||
}));
|
||||
|
||||
const onInputChange = useDebouncedSetState(setQuery, 500);
|
||||
const onInputChange = useDebounce(setQuery, 500);
|
||||
|
||||
const onChange = (selectedItems: OnChangeValue<Option, boolean>) => {
|
||||
const selected = getSelectedItems(selectedItems);
|
||||
|
||||
@@ -25,11 +25,7 @@ export const TruncatedText: React.FC<ITruncatedTextProps> = ({
|
||||
const [showTooltip, setShowTooltip] = useState(false);
|
||||
const target = useRef(null);
|
||||
|
||||
const startShowingTooltip = useDebounce(
|
||||
() => setShowTooltip(true),
|
||||
[],
|
||||
delay
|
||||
);
|
||||
const startShowingTooltip = useDebounce(() => setShowTooltip(true), delay);
|
||||
|
||||
if (!text) return <></>;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user