From fb881d568b2011248c4e8f0eb4465fdde87d7d7c Mon Sep 17 00:00:00 2001
From: Anders Bjerner <abjerner@skybrud.dk>
Date: Tue, 4 Oct 2022 19:30:15 +0200
Subject: [PATCH] Added "loading" parameter to "umbEditorHeader" directive

(cherry picked from commit 33668a5d9545e3d785539f16058bd2b34254d555)
---
 .../components/editor/umbeditorheader.directive.js | 14 ++++++++------
 .../views/components/editor/umb-editor-header.html |  6 +++---
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
index 364190cf72..94d35cb04b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
@@ -206,6 +206,7 @@ Use this directive to construct a header inside the main editor window.
 @param {boolean=} hideDescription Set to <code>true</code> to hide description.
 @param {boolean=} setpagetitle If true the page title will be set to reflect the type of data the header is working with
 @param {string=} editorfor The localization to use to aid accessibility on the edit and create screen
+@param {boolean=} loading Whether a loading indicator should be shown as part of the header.
 **/
 
 (function () {
@@ -217,8 +218,8 @@ Use this directive to construct a header inside the main editor window.
 
             scope.vm = {};
             scope.vm.dropdownOpen = false;
-            scope.vm.currentVariant = ""; 
-            scope.loading = true;
+            scope.vm.currentVariant = "";
+            scope.initializing = true;
             scope.accessibility = {};
             scope.accessibility.a11yMessage = "";
             scope.accessibility.a11yName = "";
@@ -237,12 +238,12 @@ Use this directive to construct a header inside the main editor window.
                 // to do make it work for user group create/ edit
                 // to make it work for language edit/create
                 setAccessibilityForEditorState();
-                scope.loading = false;
+                scope.initializing = false;
             } else if (scope.name) {
                 setAccessibilityForName();
-                scope.loading = false;
+                scope.initializing = false;
             } else {
-                scope.loading = false;
+                scope.initializing = false;
             }
             scope.goBack = function () {
                 if (scope.onBack) {
@@ -402,7 +403,8 @@ Use this directive to construct a header inside the main editor window.
                 onBack: "&?",
                 showBackButton: "<?",
                 editorfor: "=",
-                setpagetitle:"="
+                setpagetitle: "=",
+                loading: "="
             },
             link: link
         };
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
index cb29b193be..62e6a847e2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -1,6 +1,6 @@
-<div data-element="editor-header" class="umb-editor-header" ng-class="{'-split-view-active': splitViewOpen === true}">
-    <umb-loader ng-show="loading"></umb-loader>
-    <div class="flex items-center" style="height: 100%;" ng-hide="loading">
+<div data-element="editor-header" class="umb-editor-header" ng-class="{'-split-view-active': splitViewOpen === true}">
+    <umb-loader ng-show="initializing || loading"></umb-loader>
+    <div class="flex items-center" style="height: 100%;" ng-hide="initializing">
 
         <div ng-if="showBackButton === true && splitViewOpen !== true" style="margin-right: 15px;">
             <button type="button" class="umb-editor-header__back" ng-click="goBack()">