Refactor

app/src/actions/Sidebar.ts

@@ -2,7 +2,9 @@ import * as q from '../../../backend/src/Model'
 import { ActionTypes } from '../reducers/Sidebar'
 import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
-import { makePublishEvent, rendererEvents } from '../../../events'
+import { clearTopic } from './clearTopic'
+
+export { clearTopic } from './clearTopic'
 
 export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
   const selectedTopic = getState().tree.get('selectedTopic')
@@ -19,38 +21,3 @@ export const setCompareMessage = (message?: q.Message) => (dispatch: Dispatch<an
     type: ActionTypes.SIDEBAR_SET_COMPARE_MESSAGE,
   })
 }
-
-export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (
-  dispatch: Dispatch<any>,
-  getState: () => AppState
-) => {
-  const { connectionId } = getState().connection
-  if (!connectionId) {
-    return
-  }
-
-  const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage = {
-    topic: topic.path(),
-    payload: null,
-    retain: true,
-    qos: 0 as 0,
-  }
-  rendererEvents.emit(publishEvent, mqttMessage)
-
-  if (recursive) {
-    topic
-      .childTopics()
-      .filter(topic => Boolean(topic.message && topic.message.value))
-      .slice(0, subtopicClearLimit)
-      .forEach(topic => {
-        const mqttMessage = {
-          topic: topic.path(),
-          payload: null,
-          retain: true,
-          qos: 0 as 0,
-        }
-        rendererEvents.emit(publishEvent, mqttMessage)
-      })
-  }
-}

app/src/actions/Tree.ts

@@ -8,8 +8,10 @@ import { globalActions } from './'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../model/TopicViewModel'
 const debounce = require('lodash.debounce')
+export { clearTopic } from './clearTopic'
 
 export { moveSelectionUpOrDownwards, moveInward, moveOutward } from './visibleTreeTraversal'
+import { moveSelectionUpOrDownwards } from './visibleTreeTraversal'
 
 export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (
   dispatch: Dispatch<any>,

app/src/actions/clearTopic.ts

@@ -0,0 +1,41 @@
+import * as q from '../../../backend/src/Model'
+import { AppState } from '../reducers'
+import { Dispatch } from 'redux'
+import { makePublishEvent, rendererEvents } from '../../../events'
+import { moveSelectionUpOrDownwards } from './visibleTreeTraversal'
+
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch(moveSelectionUpOrDownwards('next'))
+
+  const { connectionId } = getState().connection
+  if (!connectionId) {
+    return
+  }
+  const publishEvent = makePublishEvent(connectionId)
+  const mqttMessage = {
+    topic: topic.path(),
+    payload: null,
+    retain: true,
+    qos: 0 as 0,
+  }
+  rendererEvents.emit(publishEvent, mqttMessage)
+  if (recursive) {
+    topic
+      .childTopics()
+      .filter(topic => Boolean(topic.message && topic.message.value))
+      .slice(0, subtopicClearLimit)
+      .forEach((topic, idx) => {
+        const mqttMessage = {
+          topic: topic.path(),
+          payload: null,
+          retain: true,
+          qos: 0 as 0,
+        }
+        // Rate limit deletion
+        setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
+      })
+  }
+}

app/src/actions/visibleTreeTraversal.ts

@@ -13,6 +13,7 @@ export const moveSelectionUpOrDownwards = (direction: 'next' | 'previous') => (
   const state = getState()
   const selected = state.tree.get('selectedTopic')
   const tree = state.tree.get('tree')
+
   if (!selected || !tree) {
     if (tree) {
       dispatch(selectTopic(tree))