still have a copy of apps for each variant, but just create it when its needed.

src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js

@@ -48,6 +48,8 @@
                     vm.nameDisabled = true;
                 }
             });
+            console.log("what do we have on vm.editor.variantApps", vm.editor.variantApps)
+            vm.editor.variantApps = angular.copy(vm.content.apps);
         }
         
         function showBackButton() {

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js

@@ -14,7 +14,7 @@
                 scope.serverValidationAliasField = "Alias";
             }
 
-            scope.isNew = scope.editorContent.state == "NotCreated";
+            scope.isNew = scope.editor.content.state == "NotCreated";
 
             localizationService.localizeMany(
                 [
@@ -25,7 +25,7 @@
                 scope.a11yMessage = data[0];
                 scope.a11yName = data[1];
                 if (!scope.isNew) {
-                    scope.a11yMessage += " " + scope.editorContent.name;
+                    scope.a11yMessage += " " + scope.editor.content.name;
 
                 } else {
                     var name = editorState.current.contentTypeName;
@@ -79,7 +79,7 @@
                 
                 checkErrorsOnOtherVariants();
                 
-                angular.forEach(scope.content.apps, (app) => {
+                angular.forEach(scope.editor.variantApps, (app) => {
                     if (app.alias === "umbContent") {
                         app.anchors = scope.content.tabs;
                     }
@@ -177,7 +177,7 @@
                 menu: "=",
                 hideActionsMenu: "<?",
                 content: "=",
-                editorContent: "=",
+                editor: "=",
                 hideChangeVariant: "<?",
                 onSelectNavigationItem: "&?",
                 onSelectAnchorItem: "&?",

src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less

@@ -178,7 +178,7 @@
 }
 
 // Validation
-.umb-sub-views-nav-item__action.-has-error,
+.show-validation .umb-sub-views-nav-item__action.-has-error,
 .show-validation .umb-sub-views-nav-item > a.-has-error {
     color: @red;
 

src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content.html

@@ -11,7 +11,7 @@
                 hide-menu="vm.page.hideActionsMenu"
                 name="vm.editor.content.name"
                 name-disabled="vm.nameDisabled"
-                editor-content="vm.editor.content"
+                editor="vm.editor"
                 content="vm.content"
                 on-select-navigation-item="vm.selectApp(item)"
                 on-select-anchor-item="vm.selectAppAnchor(item, anchor)"
@@ -34,7 +34,7 @@
             </div>
 
             <div class="umb-editor-sub-views">
-                <div ng-repeat="app in vm.content.apps track by app.alias">
+                <div ng-repeat="app in vm.editor.variantApps track by app.alias">
                     <umb-editor-sub-view model="app" content="vm.content" variant-content="vm.editor.content"/>
                 </div>
             </div>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html

@@ -40,19 +40,19 @@
                     </ng-form>
 
                     <button type="button" ng-if="vm.hasVariants === true && hideChangeVariant !== true" class="umb-variant-switcher__toggle umb-outline" ng-click="vm.dropdownOpen = !vm.dropdownOpen" ng-class="{'--error': vm.errorsOnOtherVariants}">
-                        <span ng-bind="getVariantDisplayName(editorContent)"></span>
+                        <span ng-bind="getVariantDisplayName(editor.content)"></span>
                         <ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
                     </button>
 
                     <span ng-if="vm.hasVariants === true && hideChangeVariant" class="umb-variant-switcher__toggle">
-                        <span ng-bind="getVariantDisplayName(editorContent)"></span>
+                        <span ng-bind="getVariantDisplayName(editor.content)"></span>
                     </span>
 
                     <umb-dropdown ng-if="vm.dropdownOpen" style="min-width: 100%; max-height: 250px; overflow-y: auto; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
                         <umb-dropdown-item
                             ng-repeat="variant in content.variants track by $index"
                             class="umb-variant-switcher__item"
-                            ng-class="{'--current': variant === editorContent, '--not-allowed': variant.active && vm.dropdownOpen, '--error': variantHasError(variant)}"
+                            ng-class="{'--current': variant === editor.content, '--not-allowed': variant.active && vm.dropdownOpen, '--error': variantHasError(variant)}"
                         >
                             <button type="button" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
                                 <span class="umb-variant-switcher__name" ng-bind="getVariantDisplayName(variant)"></span>
@@ -74,10 +74,10 @@
             </a>
         </div>
 
-        <div ng-if="content.apps && splitViewOpen !== true">
+        <div ng-if="editor.variantApps && splitViewOpen !== true">
             <umb-editor-navigation
                 data-element="editor-sub-views"
-                navigation="content.apps"
+                navigation="editor.variantApps"
                 on-select="selectNavigationItem(item)"
                 on-anchor-select="selectAnchorItem(item, anchor)">
             </umb-editor-navigation>