Do not indicate topic update on selection

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<HTMLDivElement | undefined>,
   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])
 }

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<SelectedState>({ selected: initialSelectionState, lastUpdate: 0 })
+  const setSelected = useCallback((selected: boolean) => {
+    setState({ selected, lastUpdate: Date.now() })
+  }, [])
+  return [state.selected, state.lastUpdate, setSelected]
+}

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<boolean | undefined>(undefined)
-  const [selected, setSelected] = useState(false)
+  const [selected, selectionLastUpdate, setSelected] = useSelectionState(false)
   const nodeRef = useRef<HTMLDivElement>()
   const isAllowedToAutoExpand = useIsAllowedToAutoExpandState(props)
   const deleteTopicCallback = useDeleteKeyCallback(treeNode, actions)
@@ -42,6 +43,7 @@ function TreeNodeComponent(props: Props) {
     lastUpdate,
     animationClass,
     selected,
+    selectionLastUpdate,
     settings.get('highlightTopicUpdates')
   )