make sure we don't upate heavy data for every single step changed

libs/remix-debug/src/debugger/VmDebugger.ts

@@ -65,14 +65,13 @@ export class VmDebuggerLogic {
   }
 
   listenToTraceManagerEvents () {
+    let triggerStorageUpdateStampId
     this.event.register('indexChanged', this, (index) => {
       if (index < 0) return
       if (this.stepManager.currentStepIndex !== index) return
 
       this.event.trigger('indexUpdate', [index])
 
-      this.event.trigger('functionsStackUpdate', [this._callTree.retrieveFunctionsStack(index)])
-
       try {
         const calldata = this._traceManager.getCallDataAt(index)
         if (this.stepManager.currentStepIndex === index) {
@@ -82,15 +81,6 @@ export class VmDebuggerLogic {
         this.event.trigger('traceManagerCallDataUpdate', [{}])
       }
 
-      try {
-        const memory = this._traceManager.getMemoryAt(index)
-        if (this.stepManager.currentStepIndex === index) {
-          this.event.trigger('traceManagerMemoryUpdate', [ui.formatMemory(memory, 16)])
-        }
-      } catch (error) {
-        this.event.trigger('traceManagerMemoryUpdate', [{}])
-      }
-
       try {
         const callstack = this._traceManager.getCallStackAt(index)
         if (this.stepManager.currentStepIndex === index) {
@@ -109,23 +99,55 @@ export class VmDebuggerLogic {
         this.event.trigger('traceManagerStackUpdate', [{}])
       }
 
-      try {
+      if (triggerStorageUpdateStampId) {
-        const address = this._traceManager.getCurrentCalledAddressAt(index)
+        clearTimeout(triggerStorageUpdateStampId)
-        if (!this.storageResolver) return
+        triggerStorageUpdateStampId = null
+      }
+      triggerStorageUpdateStampId = setTimeout(() => {
+        (() => {
+          try {
+            this.event.trigger('functionsStackUpdate', [this._callTree.retrieveFunctionsStack(index)])
+          } catch (e) {
+            console.log(e)
+          }
+          
+          try {
+            const memory = this._traceManager.getMemoryAt(index)
+            if (this.stepManager.currentStepIndex === index) {
+              this.event.trigger('traceManagerMemoryUpdate', [ui.formatMemory(memory, 16)])
+            }
+          } catch (error) {
+            this.event.trigger('traceManagerMemoryUpdate', [{}])
+          }
 
-        const storageViewer = new StorageViewer({ stepIndex: this.stepManager.currentStepIndex, tx: this.tx, address: address }, this.storageResolver, this._traceManager)
+          try {
+            const address = this._traceManager.getCurrentCalledAddressAt(index)
+            if (!this.storageResolver) return
+    
+            const storageViewer = new StorageViewer({ stepIndex: this.stepManager.currentStepIndex, tx: this.tx, address: address }, this.storageResolver, this._traceManager)
+    
+            storageViewer.storageRange().then((storage) => {
+              if (this.stepManager.currentStepIndex === index) {
+                const header = storageViewer.isComplete(address) ? '[Completely Loaded]' : '[Partially Loaded]'
+                this.event.trigger('traceManagerStorageUpdate', [storage, header])
+              }
+            }).catch((_error) => {
+              this.event.trigger('traceManagerStorageUpdate', [{}])
+            })
+          } catch (error) {
+            this.event.trigger('traceManagerStorageUpdate', [{}])
+          }
 
-        storageViewer.storageRange().then((storage) => {
+          try {
-          if (this.stepManager.currentStepIndex === index) {
+            const returnValue = this._traceManager.getReturnValue(index)
-            const header = storageViewer.isComplete(address) ? '[Completely Loaded]' : '[Partially Loaded]'
+            if (this.stepManager.currentStepIndex === index) {
-            this.event.trigger('traceManagerStorageUpdate', [storage, header])
+              this.event.trigger('traceReturnValueUpdate', [[returnValue]])
+            }
+          } catch (error) {
+            this.event.trigger('traceReturnValueUpdate', [[error]])
           }
-        }).catch((_error) => {
+        })()        
-          this.event.trigger('traceManagerStorageUpdate', [{}])
+      }, 1000)      
-        })
-      } catch (error) {
-        this.event.trigger('traceManagerStorageUpdate', [{}])
-      }
 
       try {
         const step = this._traceManager.getCurrentStep(index)
@@ -161,15 +183,6 @@ export class VmDebuggerLogic {
       } catch (error) {
         this.event.trigger('traceRemainingGasUpdate', [error])
       }
-
-      try {
-        const returnValue = this._traceManager.getReturnValue(index)
-        if (this.stepManager.currentStepIndex === index) {
-          this.event.trigger('traceReturnValueUpdate', [[returnValue]])
-        }
-      } catch (error) {
-        this.event.trigger('traceReturnValueUpdate', [[error]])
-      }
     })
   }