Show loaders while oauth and loading forms is not completed;

Remove LoadForms from promise to prevent double loading of forms list

Author: EelmanE

src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/configuration.controller.js

@@ -1,5 +1,6 @@
 function configurationController($scope, notificationsService, umbracoCmsIntegrationsCrmDynamicsResource) {
     var vm = this;
+    vm.oauthInitialized = false;
 
     vm.oauthConfig = {};
 
@@ -14,6 +15,8 @@
             if (typeof $scope.connected === "undefined")
                 notificationsService.error("Dynamics Configuration", response.message);
         }
+    }).finally(function () {
+        vm.oauthInitialized = true;
     });
 
     vm.onConnectClick = function () {

src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/formpicker.controller.js

@@ -7,11 +7,10 @@
     vm.selectedForm = {};
     vm.iframeEmbedded = false;
     vm.isConnected = false;
+    vm.formsLoading = true;
 
     umbracoCmsIntegrationsCrmDynamicsResource.checkOAuthConfiguration().then(function (response) {
-        if (response.isAuthorized) {
-            loadForms();
-        } else {
+        if (!response.isAuthorized) {
             let error = "Unable to connect to Dynamics. Please review the settings of the form picker property's data type.";
             notificationsService.error("Dynamics API", error);
             vm.error = error;
@@ -67,6 +66,7 @@
 
     function loadForms() {
         vm.loading = true;
+        vm.formsLoading = true;
         umbracoCmsIntegrationsCrmDynamicsResource.getForms().then(function (response) {
             vm.dynamicsFormsList = [];
             if (response) {
@@ -79,7 +79,10 @@
                     });
                 });
             }
+
+        }).finally(function () {
             vm.loading = false;
+            vm.formsLoading = false;
         });
     }
 

src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/views/configuration.html

@@ -1,20 +1,27 @@
 <div ng-controller="Umbraco.Cms.Integrations.Crm.Dynamics.ConfigurationController as vm">
-    <p ng-if="vm.oauthConfig && vm.oauthConfig.isConnected"><b>Connected:</b> {{ vm.oauthConfig.fullName }} </p>
-    <p ng-if="!vm.oauthConfig || !vm.oauthConfig.isConnected"><b>Disconnected</b></p>
-    <div>
-        <umb-button action="vm.onConnectClick()"
-                    type="button"
-                    button-style="primary"
-                    state="init"
-                    label="Connect"
-                    disabled="vm.oauthConfig.isConnected">
-        </umb-button>
-        <umb-button action="vm.onRevokeToken()"
-                    type="button"
-                    button-style="danger"
-                    state="init"
-                    label="Revoke"
-                    disabled="!vm.oauthConfig.isConnected">
-        </umb-button>
+
+    <umb-box-content style="height: 50px; position: relative;" ng-if="!vm.oauthInitialized">
+        <umb-load-indicator />
+    </umb-box-content>
+
+    <div ng-if="vm.oauthInitialized">
+        <p ng-if="vm.oauthConfig && vm.oauthConfig.isConnected"><b>Connected:</b> {{ vm.oauthConfig.fullName }} </p>
+        <p ng-if="!vm.oauthConfig || !vm.oauthConfig.isConnected"><b>Disconnected</b></p>
+        <div>
+            <umb-button action="vm.onConnectClick()"
+                        type="button"
+                        button-style="primary"
+                        state="init"
+                        label="Connect"
+                        disabled="vm.oauthConfig.isConnected">
+            </umb-button>
+            <umb-button action="vm.onRevokeToken()"
+                        type="button"
+                        button-style="danger"
+                        state="init"
+                        label="Revoke"
+                        disabled="!vm.oauthConfig.isConnected">
+            </umb-button>
+        </div>
     </div>
 </div>

src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/views/formpickereditor.html

@@ -3,7 +3,13 @@
         <umb-editor-container>
             <umb-box>
                 <umb-box-header title="{{ model.title }}" description="{{ model.subtitle }}"></umb-box-header>
-                <umb-box-content>
+
+                <umb-box-content style="height: 50px; position: relative;" ng-if="vm.formsLoading && !vm.isConnected">
+                    <umb-load-indicator />
+                </umb-box-content>
+
+                <umb-box-content ng-if="!vm.formsLoading">
+
                     <div class="dynOverlayGroup" ng-if="vm.isConnected">
                         <div class="form-search">
                             <i class="icon-search"></i>