Merge pull request #6080 from umbraco/v8/feature/2190-improve-jarring-tiny-loading

AB#2190 - Improve jarring TinyMCE editor loading experience

src/Umbraco.Web.UI.Client/src/common/directives/components/grid/grid.rte.directive.js

@@ -14,6 +14,8 @@ angular.module("umbraco.directives")
 
                 // TODO: A lot of the code below should be shared between the grid rte and the normal rte
 
+                scope.isLoading = true;
+
                 var promises = [];
                 
                 //To id the html textarea we need to use the datetime ticks because we can have multiple rte's per a single property alias
@@ -91,6 +93,10 @@ angular.module("umbraco.directives")
                         //custom initialization for this editor within the grid
                         editor.on('init', function (e) {
 
+                            // Used this init event - as opposed to property init_instance_callback
+                            // to turn off the loader
+                            scope.isLoading = false;
+
                             //force overflow to hidden to prevent no needed scroll
                             editor.getBody().style.overflow = "hidden";
 

src/Umbraco.Web.UI.Client/src/views/components/grid/grid-rte.html

@@ -1,3 +1,4 @@
-<div class="umb-rte"
-     id="{{textAreaHtmlId}}">
+<div>
+    <umb-load-indicator ng-if="isLoading"></umb-load-indicator>
+    <div class="umb-rte" id="{{textAreaHtmlId}}" ng-style="{ visibility :  isLoading ? 'hidden' : 'visible' }"></div>
 </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js

@@ -57,7 +57,10 @@ angular.module("umbraco")
                 var baseLineConfigObj = {
                     maxImageSize: editorConfig.maxImageSize,
                     width: width,
-                    height: height
+                    height: height,
+                    init_instance_callback: function(editor){
+                        $scope.isLoading = false;
+                    }
                 };
 
                 angular.extend(baseLineConfigObj, standardConfig);
@@ -84,9 +87,6 @@ angular.module("umbraco")
                     $timeout(function () {
                         tinymce.DOM.events.domLoaded = true;
                         tinymce.init(baseLineConfigObj);
-
-                        $scope.isLoading = false;
-
                     }, 200);
                 }