Thumbnail scrubber improvements (#4081)

* Remove deps from useDebounce hook
* Add useThrottle hook
* Throttle preview scrubber
* Scrubber improvements
This commit is contained in:
DingDongSoLong4
2023-09-08 03:33:16 +02:00
committed by GitHub
parent 7a9214375b
commit 50c4ac98af
14 changed files with 126 additions and 129 deletions

View File

@@ -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>

View File

@@ -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) {

View File

@@ -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);

View File

@@ -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 <></>;