mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
render optimizations for slider
This commit is contained in:
parent
0a0abba7f9
commit
a1227b658b
1 changed files with 9 additions and 2 deletions
|
@ -8,6 +8,7 @@ import { NODE_SETTINGS } from '~/redux/node/constants';
|
|||
import { getURL } from '~/utils/dom';
|
||||
import { PRESETS } from '~/constants/urls';
|
||||
import { LoaderCircle } from '~/components/input/LoaderCircle';
|
||||
import { throttle } from 'throttle-debounce';
|
||||
|
||||
interface IProps {
|
||||
is_loading: boolean;
|
||||
|
@ -33,6 +34,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
const slide = useRef<HTMLDivElement>();
|
||||
const wrap = useRef<HTMLDivElement>();
|
||||
|
||||
const setHeightThrottled = useCallback(throttle(100, setHeight), [setHeight]);
|
||||
|
||||
const images = useMemo(
|
||||
() =>
|
||||
(node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
|
||||
|
@ -89,8 +92,12 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
|
||||
if (current !== Math.round(selected)) setCurrent(Math.round(selected));
|
||||
|
||||
setHeight(now);
|
||||
}, [wrap, offset, heights, max_height, images, is_loading]);
|
||||
if (!is_dragging) {
|
||||
setHeight(now);
|
||||
} else {
|
||||
setHeightThrottled(now);
|
||||
}
|
||||
}, [is_dragging, wrap, offset, heights, max_height, images, is_loading]);
|
||||
|
||||
const onDrag = useCallback(
|
||||
event => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue