Optimize spinner for blocking task, not forze all body reflow

FPGAwars · Feb 24, 2025 · 3a0390e · 3a0390e
1 parent 2920e90
commit 3a0390e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 40 deletions.
diff --git a/app/index.html b/app/index.html
@@ -153,7 +153,8 @@
         z-index: 9999;
         display: none;
       }
-      body.waiting .spinner-wrapper {
+      /*body.waiting */
+      .spinner-wrapper.waiting {
         display: block;
       }
       .spinner-wrapper--bg {
@@ -304,7 +305,7 @@
       <!-- It is used for showing activity to the user -->
       <!-- The main interface is disabled and only the -->
       <!-- animation is shown                          -->
-      <div class="spinner-wrapper">
+      <div id="spin-blocking-task" class="spinner-wrapper">
         <div class="spinner-wrapper--bg"></div>
         <div class="spinner-wrapper--container">
           <div class="sk-cube-grid">

diff --git a/app/scripts/controllers/design.js b/app/scripts/controllers/design.js
@@ -109,7 +109,6 @@ angular
 
       $scope.editModeToggle = function ($event) {
         var btn = $event.currentTarget;
-        iprof.clear();
         if (!$scope.isNavigating) {
           utils.beginBlockingTask();
           var block = graph.breadcrumbs[graph.breadcrumbs.length - 1];
@@ -210,20 +209,11 @@ cells.sort((a, b) => {
               }
             });*/
 
-            iprof.start('setcells');
             $scope.graph.setCells(cells);
 
-            iprof.end('setcells');
-            iprof.start('toJSON');
             var graphData = $scope.graph.toJSON();
-            iprof.end('toJSON');
-            iprof.start('cellsToProject');
             var p = utils.cellsToProject(graphData.cells);
-            iprof.end('cellsToProject');
-            iprof.start('clone');
             tmp = utils.clone(common.allDependencies[block.type]);
-            iprof.end('clone');
-            iprof.print();
             tmp.design.graph = p.design.graph;
             var hId = block.type;
             common.allDependencies[hId] = tmp;
@@ -245,23 +235,18 @@ cells.sort((a, b) => {
             common.isEditingSubmodule = true;
             subModuleActive = true;
           }
-          requestAnimationFrame(() => {
-            setTimeout(() => {
-              iprof.start('navigateProject');
-              $rootScope.$broadcast('navigateProject', {
-                update: false,
-                project: tmp,
-                editMode: rw,
-                fromDoubleClick: false,
-              });
-              iprof.end('navigateProject');
-              iprof.start('safeApply');
-              utils.rootScopeSafeApply();
-              iprof.end('safeApply');
-              iprof.print();
-              utils.endBlockingTask();
-            }, 0);
-          });
+          //requestAnimationFrame(() => {
+          setTimeout(() => {
+            $rootScope.$broadcast('navigateProject', {
+              update: false,
+              project: tmp,
+              editMode: rw,
+              fromDoubleClick: false,
+            });
+            utils.rootScopeSafeApply();
+            utils.endBlockingTask();
+          }, 0);
+          // });
         }
       };
 
@@ -360,19 +345,12 @@ cells.sort((a, b) => {
             });
           });
         } else {
-          iprof.start('resetView');
           graph.resetView();
-          iprof.end('resetView');
 
-          iprof.start('loadDesign');
-          graph.loadDesign(args.project.design, opt, function () {
-            iprof.end('loadDesign');
-            //  utils.endBlockingTask();
-          });
+          graph.loadDesign(args.project.design, opt, function () {});
         }
         $scope.topModule = false;
         $scope.information = args.project.package;
-        //utils.rootScopeSafeApply();
         if (
           typeof common.forceBack !== 'undefined' &&
           common.forceBack === true

diff --git a/app/scripts/graphics/joint.routers.js b/app/scripts/graphics/joint.routers.js
@@ -469,6 +469,7 @@ joint.routers.ice = (function (g, _, joint) {
 
   // initiation of the route finding
   function router(vertices, opt) {
+    iprof.start('ROUTE');
     resolveOptions(opt);
 
     // jshint -W040
@@ -492,11 +493,13 @@ joint.routers.ice = (function (g, _, joint) {
     var sourceBBox = g.rect(this.sourceBBox);
     var targetBBox = g.rect(this.targetBBox);
 
+    iprof.start('ROUTE::OBSTACLEMAP');
     // pathfinding
     var map = new ObstacleMap(opt, this.paper).build(
       this.paper.model,
       this.model
     );
+    iprof.end('ROUTE::OBSTACLEMAP');
     var oldVertices = _.map(vertices, g.point);
     var newVertices = [];
     var tailPoint = sourceBBox.center().snapToGrid(opt.step);
@@ -553,6 +556,7 @@ joint.routers.ice = (function (g, _, joint) {
 
     // jshint +W040
 
+    iprof.end('ROUTE');
     return newVertices;
   }
 

diff --git a/app/scripts/services/utils.js b/app/scripts/services/utils.js
@@ -1611,8 +1611,8 @@ angular
 
       this.beginBlockingTask = async function () {
         angular.element('#menu').addClass('is-disabled');
-        document.body.classList.add('waiting');
-
+        //document.body.classList.add('waiting');
+        document.getElementById('spin-blocking-task').classList.add('waiting');
         await new Promise(requestAnimationFrame);
       };
 
@@ -1627,7 +1627,11 @@ angular
 
         // setTimeout(function(){
         angular.element('#menu').removeClass('is-disabled');
-        $('body').removeClass('waiting');
+
+        document
+          .getElementById('spin-blocking-task')
+          .classList.remove('waiting');
+        //  $('body').removeClass('waiting');
         // },1000);
       };