diff --git a/app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx b/app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx index 9f62f7f..ba346a8 100644 --- a/app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx +++ b/app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx @@ -1,15 +1,17 @@ import React, { useEffect } from 'react' -var inViewport = require('in-viewport') +const inViewport = require('in-viewport') export function useAnimationToIndicateTopicUpdate( ref: React.MutableRefObject, lastUpdate: number, className: string, selected: boolean, + selectionLastUpdate: number, shouldAnimate: boolean ) { useEffect(() => { - if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) { + const selectionDidChange = Date.now() - selectionLastUpdate < 500 + if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected && !selectionDidChange) { if (!inViewport(ref.current)) { return } @@ -32,5 +34,5 @@ export function useAnimationToIndicateTopicUpdate( animationFrame && cancelAnimationFrame(animationFrame) } } - }, [lastUpdate, selected, shouldAnimate, className]) + }, [lastUpdate, selected, selectionLastUpdate, shouldAnimate, className]) } diff --git a/app/src/components/Tree/TreeNode/effects/useSelectionState.tsx b/app/src/components/Tree/TreeNode/effects/useSelectionState.tsx new file mode 100644 index 0000000..7584936 --- /dev/null +++ b/app/src/components/Tree/TreeNode/effects/useSelectionState.tsx @@ -0,0 +1,14 @@ +import { useCallback, useState } from 'react' + +interface SelectedState { + selected: boolean + lastUpdate: number +} + +export function useSelectionState(initialSelectionState: boolean): [boolean, number, (selected: boolean) => void] { + const [state, setState] = useState({ selected: initialSelectionState, lastUpdate: 0 }) + const setSelected = useCallback((selected: boolean) => { + setState({ selected, lastUpdate: Date.now() }) + }, []) + return [state.selected, state.lastUpdate, setSelected] +} diff --git a/app/src/components/Tree/TreeNode/index.tsx b/app/src/components/Tree/TreeNode/index.tsx index 029cebe..5d15f83 100644 --- a/app/src/components/Tree/TreeNode/index.tsx +++ b/app/src/components/Tree/TreeNode/index.tsx @@ -11,6 +11,7 @@ import { useAnimationToIndicateTopicUpdate } from './effects/useAnimationToIndic import { useDeleteKeyCallback } from './effects/useDeleteKeyCallback' import { useIsAllowedToAutoExpandState } from './effects/useIsAllowedToAutoExpandState' import { useViewModelSubscriptions } from './effects/useViewModelSubscriptions' +import { useSelectionState } from './useSelectionState' export interface Props { isRoot?: boolean @@ -29,7 +30,7 @@ export interface Props { function TreeNodeComponent(props: Props) { const { actions, classes, className, settings, theme, treeNode, lastUpdate, name } = props const [collapsedOverride, setCollapsedOverride] = useState(undefined) - const [selected, setSelected] = useState(false) + const [selected, selectionLastUpdate, setSelected] = useSelectionState(false) const nodeRef = useRef() const isAllowedToAutoExpand = useIsAllowedToAutoExpandState(props) const deleteTopicCallback = useDeleteKeyCallback(treeNode, actions) @@ -42,6 +43,7 @@ function TreeNodeComponent(props: Props) { lastUpdate, animationClass, selected, + selectionLastUpdate, settings.get('highlightTopicUpdates') )