diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
index d523b24141..b6800aba65 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -63,6 +63,11 @@
    border-left-color: @white;
 }
 
+.umb-button__progress.-black {
+   border-color: rgba(255, 255, 255, 0.4);
+   border-left-color: @black;
+}
+
 .umb-button__success,
 .umb-button__error {
    position: absolute;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
index 11194eeb43..c9f47a66df 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
@@ -37,6 +37,7 @@
   align-items: center;
   flex: 0 0 30px;
   margin-right: 5px;
+  position: relative;
 }
 
 .umb-checkbox-list__item-icon {
@@ -44,6 +45,17 @@
   font-size: 16px;
 }
 
+.umb-checkbox-list__item-icon-wrapper {
+  position: relative;
+
+  .umb-button__progress {
+    width: 10px;
+    height: 10px;
+    margin-left: -10px;
+    margin-top: -8px;
+  }
+}
+
 .umb-checkbox-list__item-text {
   font-size: 14px;
   margin-bottom: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js
index ab8c133211..526d2d4dfa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js
@@ -7,7 +7,7 @@
         var oldModel = null;
 
         vm.showConfirmSubmit = false;
-        vm.loading = false;
+        vm.loadingAlias = null;
 
         vm.isSelected = isSelected;
         vm.openContentType = openContentType;
@@ -57,31 +57,13 @@
             $location.path(url);
         }
 
-        function selectCompositeContentType(compositeContentType) {  
-
-            vm.loading = true;
+        function selectCompositeContentType(compositeContentType) {
+            vm.loadingAlias = compositeContentType.contentType.alias
             
             var contentType = compositeContentType.contentType;
 
             $scope.model.selectCompositeContentType(contentType).then(function (response) {
-
-                Utilities.forEach(vm.availableGroups, function (group) {
-
-                    Utilities.forEach(group.compositeContentTypes, function (obj) {
-                        if (obj.allowed === false) {
-                            obj.selected = false;
-                        }
-                    });
-                });
-
-                $timeout(function () {
-                    vm.loading = false;
-                }, 500);
-                
-            }, function () {
-                $timeout(function () {
-                    vm.loading = false;
-                }, 500);
+                vm.loadingAlias = null;
             });
 
             // Check if the template is already selected.
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
index 8060605b87..98db2b0336 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
@@ -42,10 +42,6 @@
                         <localize key="contentTypeEditor_compositionInUse"></localize>
                     </umb-empty-state>
 
-                    <div ng-show="vm.loading" style="min-height: 20px; position: absolute; left: 0; right: 0; z-index: 1;">
-                        <umb-load-indicator></umb-load-indicator>
-                    </div>
-
                     <div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1 && model.whereCompositionUsed.length > 0">
                         <h5><localize key="contentTypeEditor_compositionUsageHeading"></localize></h5>
                         <p><localize key="contentTypeEditor_compositionUsageSpecification"></localize></p>
@@ -68,18 +64,21 @@
                             </li>
                             <li class="umb-checkbox-list__item"
                                 ng-repeat="compositeContentType in group.compositeContentTypes | orderBy:'contentType.name' | filter:searchTerm"
-                                ng-class="{'-disabled': compositeContentType.allowed === false || compositeContentType.inherited, '-selected': compositeContentType.selected}">
+                                ng-class="{'-disabled': (compositeContentType.allowed === false && !compositeContentType.selected) || compositeContentType.inherited, '-selected': compositeContentType.selected}">
 
                                 <div class="umb-checkbox-list__item-checkbox" ng-class="{'-selected': compositeContentType.selected }">
                                     <umb-checkbox input-id="umb-overlay-comp-{{compositeContentType.contentType.key}}"
                                                   model="compositeContentType.selected"
                                                   on-change="vm.selectCompositeContentType(compositeContentType)"
-                                                  disabled="compositeContentType.allowed === false || compositeContentType.inherited">
+                                                  disabled="(compositeContentType.allowed === false && !compositeContentType.selected) || compositeContentType.inherited || vm.loadingAlias">
                                     </umb-checkbox>
                                 </div>
 
-                                <label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': compositeContentType.allowed === false}">
-                                    <i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon"></i>
+                                <label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': compositeContentType.allowed === false && !compositeContentType.selected}">
+                                    <div class="umb-checkbox-list__item-icon-wrapper">
+                                        <i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon" ng-class="{'o-0': compositeContentType.contentType.alias === vm.loadingAlias}"></i>
+                                        <div ng-if="compositeContentType.contentType.alias === vm.loadingAlias" class="umb-button__progress -black umb-checkbox-list__item-checkbox-progress"></div>
+                                    </div>
                                     {{ compositeContentType.contentType.name }}
                                     <span class="umb-checkbox-list__item-caption" ng-if="compositeContentType.inherited">(inherited)</span>
                                 </label>