[go: up one dir, main page]

[CrOS Network] Fix flash of content when network config dialog loads.

The flash was caused by the fact that separate parts of the
configuration dialog load at different times. To fix this issue, a
spinner is shown in the dialog while the dialog loads its fields. Once
the fields are all loaded, the spinner is removed and the rest of the UI
is shown.

(cherry picked from commit 4b315cc333b822cc66de685bac74574219e8291d)

Bug: 905231
Change-Id: I1ee4306cce945f71ff5ce6c71d3518c4bdd2c70a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1649222
Auto-Submit: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#668070}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1656378
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/branch-heads/3809@{#264}
Cr-Branched-From: d82dec1a818f378c464ba307ddd9c92133eac355-refs/heads/master@{#665002}
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_config.html b/ui/webui/resources/cr_components/chromeos/network/network_config.html
index fcab8984..6461170 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_config.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_config.html
@@ -9,6 +9,7 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="network_config_input.html">
 <link rel="import" href="network_config_select.html">
 <link rel="import" href="network_config_toggle.html">
@@ -18,192 +19,202 @@
 <dom-module id="network-config">
   <template>
     <style include="network-shared settings-shared action-link iron-flex">
+      #spinner-container {
+        height: 200px;
+      }
     </style>
 
-    <!-- SSID (WiFi) -->
-    <template is="dom-if" if="[[isType_(NetworkType_.WI_FI, type)]]" restamp>
-      <network-config-input id="ssid" label="[[i18n('OncWiFi-SSID')]]"
-          value="{{configProperties_.WiFi.SSID}}" readonly="[[hasGuid_(guid)]]">
-      </network-config-input>
+    <template is="dom-if" if="[[waitingForProperties_]]" restamp>
+      <div id="spinner-container" class="layout vertical center-center">
+        <paper-spinner-lite active></paper-spinner-lite>
+      </div>
     </template>
 
-    <!-- Security (WiFi and Ethernet) -->
-    <template is="dom-if" if="[[securityIsVisible_(type)]]" restamp>
-      <network-config-select id="security" label="[[i18n('OncWiFi-Security')]]"
-          value="{{security_}}"
-          disabled="[[!securityIsEnabled_(guid, type)]]"
-          items="[[getSecurityItems_(type)]]"
-          onc-prefix="WiFi.Security"
-          property="[[getManagedSecurity_(managedProperties)]]">
-      </network-config-select>
-    </template>
-
-    <!-- Passphrase (WiFi) -->
-    <template is="dom-if" if="[[configRequiresPassphrase_(type, security_)]]"
-        restamp>
-      <network-password-input label="[[i18n('OncWiFi-Passphrase')]]"
-          value="{{configProperties_.WiFi.Passphrase}}"
-          on-enter="connectIfConfigured_"
-          property="[[managedProperties.WiFi.Passphrase]]">
-      </network-password-input>
-    </template>
-
-    <!-- VPN -->
-    <template is="dom-if" if="[[showVpn_]]" restamp>
-      <network-config-input label="[[i18n('OncVPN-Host')]]"
-          value="{{configProperties_.VPN.Host}}"
-          property="[[managedProperties.VPN.Host]]">
-      </network-config-input>
-      <network-config-input label="[[i18n('OncName')]]"
-          value="{{configProperties_.Name}}"
-          readonly="[[hasGuid_(guid)]]">
-      </network-config-input>
-      <network-config-select id="outer" label="[[i18n('OncVPN-Type')]]"
-          value="{{vpnType_}}" items="[[vpnTypeItems_]]"
-          onc-prefix="VPN.Type" disabled="[[hasGuid_(guid)]]"
-          property="[[managedProperties.VPN.Type]]">
-      </network-config-select>
-      <template is="dom-if" if="[[!showVpn_.OpenVPN]]">
-        <network-config-input label="[[i18n('OncVPN-L2TP-Username')]]"
-            value="{{configProperties_.VPN.L2TP.Username}}"
-            property="[[managedProperties.VPN.L2TP.Username]]">
+    <template is="dom-if" if="[[!waitingForProperties_]]" restamp>
+      <!-- SSID (WiFi) -->
+      <template is="dom-if" if="[[isType_(NetworkType_.WI_FI, type)]]" restamp>
+        <network-config-input id="ssid" label="[[i18n('OncWiFi-SSID')]]"
+            value="{{configProperties_.WiFi.SSID}}" readonly="[[hasGuid_(guid)]]">
         </network-config-input>
-        <network-password-input label="[[i18n('OncVPN-L2TP-Password')]]"
-            value="{{configProperties_.VPN.L2TP.Password}}"
-            property="[[managedProperties.VPN.L2TP.Password]]">
+      </template>
+
+      <!-- Security (WiFi and Ethernet) -->
+      <template is="dom-if" if="[[securityIsVisible_(type)]]" restamp>
+        <network-config-select id="security" label="[[i18n('OncWiFi-Security')]]"
+            value="{{security_}}"
+            disabled="[[!securityIsEnabled_(guid, type)]]"
+            items="[[getSecurityItems_(type)]]"
+            onc-prefix="WiFi.Security"
+            property="[[getManagedSecurity_(managedProperties)]]">
+        </network-config-select>
+      </template>
+
+      <!-- Passphrase (WiFi) -->
+      <template is="dom-if" if="[[configRequiresPassphrase_(type, security_)]]"
+          restamp>
+        <network-password-input label="[[i18n('OncWiFi-Passphrase')]]"
+            value="{{configProperties_.WiFi.Passphrase}}"
+            on-enter="connectIfConfigured_"
+            property="[[managedProperties.WiFi.Passphrase]]">
         </network-password-input>
-        <network-config-input label="[[i18n('OncVPN-IPsec-Group')]]"
-            value="{{configProperties_.VPN.IPsec.Group}}"
-            property="[[managedProperties.VPN.IPsec.Group]]">
+      </template>
+
+      <!-- VPN -->
+      <template is="dom-if" if="[[showVpn_]]" restamp>
+        <network-config-input label="[[i18n('OncVPN-Host')]]"
+            value="{{configProperties_.VPN.Host}}"
+            property="[[managedProperties.VPN.Host]]">
         </network-config-input>
-        <template is="dom-if" if="[[!showVpn_.Cert]]">
-          <network-password-input label="[[i18n('OncVPN-IPsec-PSK')]]"
-              value="{{configProperties_.VPN.IPsec.PSK}}"
-              property="[[managedProperties.VPN.IPsec.PSK]]">
+        <network-config-input label="[[i18n('OncName')]]"
+            value="{{configProperties_.Name}}"
+            readonly="[[hasGuid_(guid)]]">
+        </network-config-input>
+        <network-config-select id="outer" label="[[i18n('OncVPN-Type')]]"
+            value="{{vpnType_}}" items="[[vpnTypeItems_]]"
+            onc-prefix="VPN.Type" disabled="[[hasGuid_(guid)]]"
+            property="[[managedProperties.VPN.Type]]">
+        </network-config-select>
+        <template is="dom-if" if="[[!showVpn_.OpenVPN]]">
+          <network-config-input label="[[i18n('OncVPN-L2TP-Username')]]"
+              value="{{configProperties_.VPN.L2TP.Username}}"
+              property="[[managedProperties.VPN.L2TP.Username]]">
+          </network-config-input>
+          <network-password-input label="[[i18n('OncVPN-L2TP-Password')]]"
+              value="{{configProperties_.VPN.L2TP.Password}}"
+              property="[[managedProperties.VPN.L2TP.Password]]">
           </network-password-input>
+          <network-config-input label="[[i18n('OncVPN-IPsec-Group')]]"
+              value="{{configProperties_.VPN.IPsec.Group}}"
+              property="[[managedProperties.VPN.IPsec.Group]]">
+          </network-config-input>
+          <template is="dom-if" if="[[!showVpn_.Cert]]">
+            <network-password-input label="[[i18n('OncVPN-IPsec-PSK')]]"
+                value="{{configProperties_.VPN.IPsec.PSK}}"
+                property="[[managedProperties.VPN.IPsec.PSK]]">
+            </network-password-input>
+          </template>
         </template>
+        <template is="dom-if" if="[[showVpn_.OpenVPN]]">
+          <network-config-input label="[[i18n('OncVPN-OpenVPN-Username')]]"
+              value="{{configProperties_.VPN.OpenVPN.Username}}"
+              property="[[managedProperties.VPN.OpenVPN.Username]]">
+          </network-config-input>
+          <network-password-input label="[[i18n('OncVPN-OpenVPN-Password')]]"
+              value="{{configProperties_.VPN.OpenVPN.Password}}"
+              property="[[managedProperties.VPN.OpenVPN.Password]]">
+          </network-password-input>
+          <network-config-input label="[[i18n('OncVPN-OpenVPN-OTP')]]"
+              value="{{configProperties_.VPN.OpenVPN.OTP}}"
+              property="[[managedProperties.VPN.OpenVPN.OTP]]">
+          </network-config-input>
+        </template>
+        <template is="dom-if" if="[[showVpn_.Cert]]">
+          <network-config-select id="vpnServerCa"
+              label="[[i18n('OncEAP-ServerCA')]]"
+              value="{{selectedServerCaHash_}}" items="[[serverCaCerts_]]"
+              cert-list
+              property="[[getManagedVpnServerCaRefs_(managedProperties)]]">
+          </network-config-select>
+          <network-config-select id="vpnUserCert"
+              label="[[i18n('OncEAP-UserCert')]]"
+              value="{{selectedUserCertHash_}}" items="[[userCerts_]]"
+              cert-list
+              property="[[getManagedVpnClientCertType_(managedProperties)]]">
+          </network-config-select>
+        </template>
+        <network-config-toggle label="[[i18n('networkConfigSaveCredentials')]]"
+            checked="{{vpnSaveCredentials_}}"
+            property="[[getManagedVpnSaveCredentials_(managedProperties)]]">
+        </network-config-toggle>
       </template>
-      <template is="dom-if" if="[[showVpn_.OpenVPN]]">
-        <network-config-input label="[[i18n('OncVPN-OpenVPN-Username')]]"
-            value="{{configProperties_.VPN.OpenVPN.Username}}"
-            property="[[managedProperties.VPN.OpenVPN.Username]]">
-        </network-config-input>
-        <network-password-input label="[[i18n('OncVPN-OpenVPN-Password')]]"
-            value="{{configProperties_.VPN.OpenVPN.Password}}"
-            property="[[managedProperties.VPN.OpenVPN.Password]]">
-        </network-password-input>
-        <network-config-input label="[[i18n('OncVPN-OpenVPN-OTP')]]"
-            value="{{configProperties_.VPN.OpenVPN.OTP}}"
-            property="[[managedProperties.VPN.OpenVPN.OTP]]">
-        </network-config-input>
-      </template>
-      <template is="dom-if" if="[[showVpn_.Cert]]">
-        <network-config-select id="vpnServerCa"
-            label="[[i18n('OncEAP-ServerCA')]]"
+
+      <!-- EAP (WiFi, WiMAX, Ethernet) -->
+      <template is="dom-if" if="[[showEap_]]" restamp>
+        <network-config-select id="outer" label="[[i18n('OncEAP-Outer')]]"
+            value="{{eapProperties_.Outer}}" items="[[eapOuterItems_]]"
+            onc-prefix="EAP.Outer" hidden="[[!showEap_.Outer]]"
+            property="[[managedEapProperties_.Outer]]">
+        </network-config-select>
+        <network-config-select id="inner" label="[[i18n('OncEAP-Inner')]]"
+            value="{{eapProperties_.Inner}}"
+            items="[[getEapInnerItems_(eapProperties_.Outer)]]"
+            onc-prefix="EAP.Inner" hidden="[[!showEap_.Inner]]"
+            property="[[managedEapProperties_.Inner]]">
+        </network-config-select>
+        <network-config-select id="serverCa" label="[[i18n('OncEAP-ServerCA')]]"
             value="{{selectedServerCaHash_}}" items="[[serverCaCerts_]]"
-            cert-list
-            property="[[getManagedVpnServerCaRefs_(managedProperties)]]">
+            hidden="[[!showEap_.ServerCA]]" cert-list
+            property="[[managedEapProperties_.UseSystemCAs]]"
+            device-certs->
         </network-config-select>
-        <network-config-select id="vpnUserCert"
-            label="[[i18n('OncEAP-UserCert')]]"
+        <network-config-input label="[[i18n('OncEAP-SubjectMatch')]]"
+            value="{{eapProperties_.SubjectMatch}}"
+            hidden="[[!showEap_.SubjectMatch]]"
+            property="[[managedEapProperties_.SubjectMatch]]">
+        </network-config-input>
+        <network-config-select id="userCert" label="[[i18n('OncEAP-UserCert')]]"
             value="{{selectedUserCertHash_}}" items="[[userCerts_]]"
-            cert-list
-            property="[[getManagedVpnClientCertType_(managedProperties)]]">
+            hidden="[[!showEap_.UserCert]]" cert-list
+            property="[[managedEapProperties_.ClientCertType]]"
+            device-certs->
         </network-config-select>
+        <network-config-input label="[[i18n('OncEAP-Identity')]]"
+            value="{{eapProperties_.Identity}}" hidden="[[!showEap_.Identity]]"
+            property="[[managedEapProperties_.Identity]]">
+        </network-config-input>
+        <network-password-input label="[[i18n('OncEAP-Password')]]"
+            value="{{eapProperties_.Password}}" hidden="[[!showEap_.Password]]"
+            property="[[managedEapProperties_.Password]]">
+        </network-password-input>
+        <network-config-input label="[[i18n('OncEAP-AnonymousIdentity')]]"
+            value="{{eapProperties_.AnonymousIdentity}}"
+            hidden="[[!showEap_.AnonymousIdentity]]"
+            property="[[managedEapProperties_.AnonymousIdentity]]">
+        </network-config-input>
+        <network-config-toggle label="[[i18n('networkConfigSaveCredentials')]]"
+            checked="{{eapProperties_.SaveCredentials}}"
+            property="[[managedEapProperties_.SaveCredentials]]">
+        </network-config-toggle>
       </template>
-      <network-config-toggle label="[[i18n('networkConfigSaveCredentials')]]"
-          checked="{{vpnSaveCredentials_}}"
-          property="[[getManagedVpnSaveCredentials_(managedProperties)]]">
-      </network-config-toggle>
-    </template>
 
-    <!-- EAP (WiFi, WiMAX, Ethernet) -->
-    <template is="dom-if" if="[[showEap_]]" restamp>
-      <network-config-select id="outer" label="[[i18n('OncEAP-Outer')]]"
-          value="{{eapProperties_.Outer}}" items="[[eapOuterItems_]]"
-          onc-prefix="EAP.Outer" hidden="[[!showEap_.Outer]]"
-          property="[[managedEapProperties_.Outer]]">
-      </network-config-select>
-      <network-config-select id="inner" label="[[i18n('OncEAP-Inner')]]"
-          value="{{eapProperties_.Inner}}"
-          items="[[getEapInnerItems_(eapProperties_.Outer)]]"
-          onc-prefix="EAP.Inner" hidden="[[!showEap_.Inner]]"
-          property="[[managedEapProperties_.Inner]]">
-      </network-config-select>
-      <network-config-select id="serverCa" label="[[i18n('OncEAP-ServerCA')]]"
-          value="{{selectedServerCaHash_}}" items="[[serverCaCerts_]]"
-          hidden="[[!showEap_.ServerCA]]" cert-list
-          property="[[managedEapProperties_.UseSystemCAs]]"
-          device-certs->
-      </network-config-select>
-      <network-config-input label="[[i18n('OncEAP-SubjectMatch')]]"
-          value="{{eapProperties_.SubjectMatch}}"
-          hidden="[[!showEap_.SubjectMatch]]"
-          property="[[managedEapProperties_.SubjectMatch]]">
-      </network-config-input>
-      <network-config-select id="userCert" label="[[i18n('OncEAP-UserCert')]]"
-          value="{{selectedUserCertHash_}}" items="[[userCerts_]]"
-          hidden="[[!showEap_.UserCert]]" cert-list
-          property="[[managedEapProperties_.ClientCertType]]"
-          device-certs->
-      </network-config-select>
-      <network-config-input label="[[i18n('OncEAP-Identity')]]"
-          value="{{eapProperties_.Identity}}" hidden="[[!showEap_.Identity]]"
-          property="[[managedEapProperties_.Identity]]">
-      </network-config-input>
-      <network-password-input label="[[i18n('OncEAP-Password')]]"
-          value="{{eapProperties_.Password}}" hidden="[[!showEap_.Password]]"
-          property="[[managedEapProperties_.Password]]">
-      </network-password-input>
-      <network-config-input label="[[i18n('OncEAP-AnonymousIdentity')]]"
-          value="{{eapProperties_.AnonymousIdentity}}"
-          hidden="[[!showEap_.AnonymousIdentity]]"
-          property="[[managedEapProperties_.AnonymousIdentity]]">
-      </network-config-input>
-      <network-config-toggle label="[[i18n('networkConfigSaveCredentials')]]"
-          checked="{{eapProperties_.SaveCredentials}}"
-          property="[[managedEapProperties_.SaveCredentials]]">
-      </network-config-toggle>
-    </template>
+      <!-- Share (WiFi and WiMAX) -->
+      <template is="dom-if"
+          if="[[shareIsVisible_(guid, type, managedProperties)]]" restamp>
+        <div class="property-box">
+          <div id="shareLabel" class="start">[[i18n('networkConfigShare')]]</div>
+          <cr-toggle id="share" checked="{{shareNetwork_}}"
+              disabled="[[!shareIsEnabled_(guid, configProperties_.*,
+                        security_, eapProperties_.*, shareAllowEnable)]]"
+              aria-labeledby="shareLabel" on-change="onShareChanged_">
+          </cr-toggle>
+        </div>
+      </template>
 
-    <!-- Share (WiFi and WiMAX) -->
-    <template is="dom-if"
-        if="[[shareIsVisible_(guid, type, managedProperties)]]" restamp>
-      <div class="property-box">
-        <div id="shareLabel" class="start">[[i18n('networkConfigShare')]]</div>
-        <cr-toggle id="share" checked="{{shareNetwork_}}"
-            disabled="[[!shareIsEnabled_(guid, configProperties_.*,
-                      security_, eapProperties_.*, shareAllowEnable)]]"
-            aria-labeledby="shareLabel" on-change="onShareChanged_">
-        </cr-toggle>
-      </div>
-    </template>
+      <!-- AutoConnect (WiFi) -->
+      <template is="dom-if" if="[[configCanAutoConnect_(type)]]" restamp>
+        <div class="property-box">
+          <div id="autoConnectLabel"
+              class="start">[[i18n('networkAutoConnect')]]</div>
+          <template is="dom-if"
+              if="[[isAutoConnectEnforcedByPolicy_(globalPolicy)]]" restamp>
+            <cr-policy-indicator indicator-type="devicePolicy">
+            </cr-policy-indicator>
+          </template>
+          <cr-toggle id="autoConnect" checked="{{autoConnect_}}"
+              disabled="[[autoConnectDisabled_(globalPolicy)]]"
+              aria-labeledby="autoConnectLabel">
+          </cr-toggle>
+        </div>
+      </template>
 
-    <!-- AutoConnect (WiFi) -->
-    <template is="dom-if" if="[[configCanAutoConnect_(type)]]" restamp>
-      <div class="property-box">
-        <div id="autoConnectLabel"
-            class="start">[[i18n('networkAutoConnect')]]</div>
-        <template is="dom-if"
-            if="[[isAutoConnectEnforcedByPolicy_(globalPolicy)]]" restamp>
-          <cr-policy-indicator indicator-type="devicePolicy">
-          </cr-policy-indicator>
-        </template>
-        <cr-toggle id="autoConnect" checked="{{autoConnect_}}"
-            disabled="[[autoConnectDisabled_(globalPolicy)]]"
-            aria-labeledby="autoConnectLabel">
-        </cr-toggle>
-      </div>
+      <!-- Hidden Network Warning -->
+      <template is="dom-if" if="{{autoConnect_}}" restamp>
+        <div>
+          <iron-icon icon="cr:warning"></iron-icon>
+          [[i18nAdvanced('hiddenNetworkWarning')]]
+        </div>
+      </template>
     </template>
-
-    <!-- Hidden Network Warning -->
-    <template is="dom-if" if="{{autoConnect_}}" restamp>
-      <div>
-        <iron-icon icon="cr:warning"></iron-icon>
-        [[i18nAdvanced('hiddenNetworkWarning')]]
-      </div>
-    </template>
-
   </template>
   <script src="network_config.js"></script>
 </dom-module>
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_config.js b/ui/webui/resources/cr_components/chromeos/network/network_config.js
index 14b525e..83396a86 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_config.js
+++ b/ui/webui/resources/cr_components/chromeos/network/network_config.js
@@ -46,13 +46,12 @@
     /**
      * The GUID when an existing network is being configured. This will be
      * empty when configuring a new network.
-     * @private
      */
     guid: String,
 
     /**
      * The type of network being configured.
-     * @private {!chrome.networkingPrivate.NetworkType}
+     * @type {!chrome.networkingPrivate.NetworkType}
      */
     type: String,
 
@@ -62,14 +61,12 @@
     /** The default shared state. */
     shareDefault: Boolean,
 
-    /** @private */
     enableConnect: {
       type: Boolean,
       notify: true,
       value: false,
     },
 
-    /** @private */
     enableSave: {
       type: Boolean,
       notify: true,
@@ -86,7 +83,7 @@
      * The managed properties of an existing network.
      * This is used for determination of managed fields.
      * This will be undefined when configuring a new network.
-     * @private {!chrome.networkingPrivate.ManagedProperties|undefined}
+     * @type {!chrome.networkingPrivate.ManagedProperties|undefined}
      */
     managedProperties: {
       type: Object,
@@ -102,8 +99,17 @@
       value: null,
     },
 
-    /** Set if |guid| is not empty once managedProperties are received. */
-    propertiesReceived_: Boolean,
+    /**
+     * Whether this element is waiting for additional properties of the network
+     * to configure. If a network GUID is supplied, an asynchronous request is
+     * required to fetch these properties; otherwise, there is no need to wait
+     * for more properties to arrive.
+     * @private
+     */
+    waitingForProperties_: {
+      type: Boolean,
+      value: true,
+    },
 
     /** Set once managedProperties have been sent; prevents multiple saves. */
     propertiesSent_: Boolean,
@@ -326,7 +332,7 @@
 
   observers: [
     'setEnableConnect_(isConfigured_, propertiesSent_)',
-    'setEnableSave_(isConfigured_, propertiesReceived_)',
+    'setEnableSave_(isConfigured_, waitingForProperties_)',
     'updateConfigProperties_(managedProperties)',
     'updateSecurity_(configProperties_, security_)',
     'updateEapOuter_(eapProperties_.Outer)',
@@ -375,17 +381,17 @@
     this.selectedUserCertHash_ = undefined;
     this.guid = this.managedProperties.GUID;
     this.type = this.managedProperties.Type;
+    this.waitingForProperties_ = !!this.guid;
+
     if (this.guid) {
       this.networkingPrivate.getManagedProperties(
           this.guid, (managedProperties) => {
             this.getManagedPropertiesCallback_(managedProperties);
-            this.focusFirstInput_();
           });
     } else {
-      this.async(() => {
-        this.focusFirstInput_();
-      });
+      this.focusFirstInput_();
     }
+
     if (this.type == CrOnc.Type.VPN ||
         (this.globalPolicy &&
          this.globalPolicy.AllowOnlyPolicyNetworksToConnect)) {
@@ -393,6 +399,7 @@
     } else {
       this.autoConnect_ = true;
     }
+
     this.onCertificateListsChanged_();
     this.updateIsConfigured_();
     this.setShareNetwork_();
@@ -587,12 +594,14 @@
    * @private
    */
   setManagedProperties_: function(managedProperties) {
-    this.propertiesReceived_ = true;
     this.managedProperties = managedProperties;
     this.managedEapProperties_ = this.getManagedEap_(managedProperties);
     this.setError_(managedProperties.ErrorState);
     this.updateCertError_();
 
+    this.waitingForProperties_ = false;
+    this.focusFirstInput_();
+
     // Set the current shareNetwork_ value when properties are received.
     this.setShareNetwork_();
   },
@@ -1230,7 +1239,7 @@
 
   /** @private */
   setEnableSave_: function() {
-    this.enableSave = this.isConfigured_ && this.propertiesReceived_;
+    this.enableSave = this.isConfigured_ && !this.waitingForProperties_;
   },
 
   /** @private */