tr(editor): inject artifact in editor after everything has been initialized (#2123)

This allows the editor panels to be displayed and showing a loading
message while the artifact is renderred inside whiteboard.

Closes [BS-15887](https://bonitasoft.atlassian.net/browse/BS-15887)

frontend/app/js/editor/editor.controller.js

@@ -30,11 +30,12 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
    * The editor mode
    */
   $scope.mode = mode || 'page';
-  /**
-   * The root container of the editor, always present. If there is no page loaded, then we build an empty one.
-   * It initially contains a single row, and may not contain less than a row. The counters are used by e2e tests.
-   */
-  $scope.page = artifact;
+
+  // We delay page resolution to not block the ui while having  a big page to be displayed
+  $timeout(() => {
+    $scope.page = artifact;
+    artifactRepo.setLastSavedState($scope.page);
+  }, 0);
 
   $scope.resolution = function() {
     return resolutions.selected();

frontend/app/js/editor/editor.html

@@ -10,8 +10,9 @@
         </div>
 
         <div id="editor-container" ng-class="{'': !sectionOpened}">
+            <h4 ng-if="!page" class="Editor-loadingText" translate>Loading {{mode}}...</h4>
             <div class="workspace">
-                <container container="page" editor="editor" id="editor" ng-click="editor.selectComponent(null, $event)"
+                <container ng-if="page"  container="page" editor="editor" id="editor" ng-click="editor.selectComponent(null, $event)"
                            component-highlighter="component-element--hover" data-is-editor-container="true" bo-dropzone
                            bo-drop-success="appendComponent($event, $data)"></container>
                 <div class="alert alert-editor-hint" ng-if="page.rows.length === 1 && page.rows[0].length === 0">
@@ -36,4 +37,4 @@
             <div class="PropertyPanel-popover" ng-include="'js/editor/properties-panel/properties-panel.html'"></div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>

frontend/app/js/editor/editor.less

@@ -50,3 +50,8 @@
   text-overflow: ellipsis;
   vertical-align: top;
 }
+
+.Editor-loadingText {
+  text-align: center;
+  padding: 3em;
+}

frontend/test/unit/editor/editor.controller.spec.js

@@ -229,6 +229,7 @@ describe('EditorCtrl', function() {
       };
 
       $scope.$apply();
+      $timeout.flush();
     });
 
     it('should append a component to first row if page is empty', function() {