Limit toolbox updates to when we tell it to update

src/containers/blocks.jsx

@@ -70,6 +70,12 @@ class Blocks extends React.Component {
         );
         this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
 
+        // we actually never want the workspace to enable "refresh toolbox" - this basically re-renders the entire toolbox
+        // every time we reset the workspace.  We call updateToolbox as a part of componentDidUpdate so the toolbox will
+        // still correctly be updated
+        this.setToolboxRefreshEnabled = this.workspace.setToolboxRefreshEnabled.bind(this.workspace);
+        this.workspace.setToolboxRefreshEnabled = () => this.setToolboxRefreshEnabled(false);
+
         // @todo change this when blockly supports UI events
         addFunctionListener(this.workspace, 'translate', this.onWorkspaceMetricsChange);
         addFunctionListener(this.workspace, 'zoom', this.onWorkspaceMetricsChange);
@@ -97,14 +103,18 @@ class Blocks extends React.Component {
         if (prevProps.toolboxXML !== this.props.toolboxXML) {
             const categoryName = this.workspace.toolbox_.getSelectedCategoryName();
             const offset = this.workspace.toolbox_.getCategoryScrollOffset();
-            this.workspace.updateToolbox(this.props.toolboxXML);
-            const currentCategoryPos = this.workspace.toolbox_.getCategoryPositionByName(categoryName);
-            const currentCategoryLen = this.workspace.toolbox_.getCategoryLengthByName(categoryName);
-            if (offset < currentCategoryLen) {
-                this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos + offset);
-            } else {
-                this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos);
-            }
+            // rather than update the toolbox "sync" -- update it in the next frame
+            clearTimeout(this.toolboxUpdate);
+            this.toolboxUpdate = setTimeout(() => {
+                this.workspace.updateToolbox(this.props.toolboxXML);
+                const currentCategoryPos = this.workspace.toolbox_.getCategoryPositionByName(categoryName);
+                const currentCategoryLen = this.workspace.toolbox_.getCategoryLengthByName(categoryName);
+                if (offset < currentCategoryLen) {
+                    this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos + offset);
+                } else {
+                    this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos);
+                }
+            }, 0);
         }
         if (this.props.isVisible === prevProps.isVisible) {
             return;
@@ -122,6 +132,7 @@ class Blocks extends React.Component {
     componentWillUnmount () {
         this.detachVM();
         this.workspace.dispose();
+        clearTimeout(this.toolboxUpdate);
     }
     attachVM () {
         this.workspace.addChangeListener(this.props.vm.blockListener);
@@ -218,11 +229,13 @@ class Blocks extends React.Component {
         this.workspace.addChangeListener(this.props.vm.blockListener);
 
         if (this.props.vm.editingTarget && this.state.workspaceMetrics[this.props.vm.editingTarget.id]) {
-            const {scrollX, scrollY, scale} = this.state.workspaceMetrics[this.props.vm.editingTarget.id];
-            this.workspace.scrollX = scrollX;
-            this.workspace.scrollY = scrollY;
-            this.workspace.scale = scale;
-            this.workspace.resize();
+            setTimeout(() => {
+                const {scrollX, scrollY, scale} = this.state.workspaceMetrics[this.props.vm.editingTarget.id];
+                this.workspace.scrollX = scrollX;
+                this.workspace.scrollY = scrollY;
+                this.workspace.scale = scale;
+                this.workspace.resize();
+            }, 0);
         }
     }
     handleExtensionAdded (blocksInfo) {