Printer settings: Fix flickering UI issue when loading printers

• Wait for printers to load before rendering
  nearby/add printer sections.

Bug:1108294
Test:manual inspection

Change-Id: I098fcc5307993c14866bcadab81096ea09dbd041
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2364189
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Cr-Commit-Position: refs/heads/master@{#804575}

chrome/browser/resources/settings/chromeos/os_printing_page/cups_printers.html

@@ -114,45 +114,46 @@
         </settings-cups-saved-printers>
       </div>
     </template>
-
-    <div class="padded first" id="nearbyPrinters">
-      <div aria-label$="[[nearbyPrintersAriaLabel_]]">
+    <template is="dom-if" if="[[attemptedLoadingPrinters_]]">
+      <div class="padded first" id="nearbyPrinters">
+        <div aria-label$="[[nearbyPrintersAriaLabel_]]">
           $i18n{nearbyPrintersListTitle}
-      </div>
-      <settings-localized-link class="secondary"
-          localized-string="$i18n{nearbyPrintersListDescription}"
-          link-url="$i18n{printingCUPSPrintLearnMoreUrl}">
-      </settings-localized-link>
-      <template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter,
+        </div>
+        <settings-localized-link class="secondary"
+            localized-string="$i18n{nearbyPrintersListDescription}"
+            link-url="$i18n{printingCUPSPrintLearnMoreUrl}">
+        </settings-localized-link>
+        <template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter,
           prefs.native_printing.user_native_printers_allowed.value)]]">
-        <cr-policy-pref-indicator
-            pref="[[prefs.native_printing.user_native_printers_allowed]]"
-            icon-aria-label="$i18n{printingPageTitle}">
-        </cr-policy-pref-indicator>
-      </template>
-    </div>
+          <cr-policy-pref-indicator
+              pref="[[prefs.native_printing.user_native_printers_allowed]]"
+              icon-aria-label="$i18n{printingPageTitle}">
+          </cr-policy-pref-indicator>
+        </template>
+      </div>
 
-    <div id="addPrinterSection" class="list-frame">
-      <div class="layout horizontal center custom-list-item">
-        <div id="addPrinterText" aria-hidden="true">
-          $i18n{addCupsPrinter}
+      <div id="addPrinterSection" class="list-frame">
+        <div class="layout horizontal center custom-list-item">
+          <div id="addPrinterText" aria-hidden="true">
+            $i18n{addCupsPrinter}
+          </div>
+          <cr-icon-button class="action-button" id="addManualPrinterIcon"
+              iron-icon="settings20:printer-add"
+              on-click="onAddPrinterTap_"
+              disabled="[[!addPrinterButtonActive_(canAddPrinter,
+                  prefs.native_printing.user_native_printers_allowed.value)]]"
+              title="$i18n{addCupsPrinter}"
+              deep-link-focus-id$="[[Setting.kAddPrinter]]">
+          </cr-icon-button>
         </div>
-        <cr-icon-button class="action-button" id="addManualPrinterIcon"
-            iron-icon="settings20:printer-add"
-            on-click="onAddPrinterTap_"
-            disabled="[[!addPrinterButtonActive_(canAddPrinter,
-                prefs.native_printing.user_native_printers_allowed.value)]]"
-            title="$i18n{addCupsPrinter}"
-            deep-link-focus-id$="[[Setting.kAddPrinter]]">
-        </cr-icon-button>
       </div>
-    </div>
 
-    <template is="dom-if" if="[[canAddPrinter]]" restamp>
-      <settings-cups-nearby-printers search-term="[[searchTerm]]"
-          active-printer="{{activePrinter}}"
-          printers-count="{{nearbyPrinterCount_}}">
-      </settings-cups-nearby-printers>
+      <template is="dom-if" if="[[canAddPrinter]]" restamp>
+        <settings-cups-nearby-printers search-term="[[searchTerm]]"
+            active-printer="{{activePrinter}}"
+            printers-count="{{nearbyPrinterCount_}}">
+        </settings-cups-nearby-printers>
+      </template>
     </template>
 
     <settings-cups-add-printer-dialog id="addPrinterDialog"

chrome/browser/resources/settings/chromeos/os_printing_page/cups_printers.js

@@ -59,6 +59,12 @@ Polymer({
       value: () => [],
     },
 
+    /** @private */
+    attemptedLoadingPrinters_: {
+      type: Boolean,
+      value: false,
+    },
+
     /** @private */
     showCupsEditPrinterDialog_: Boolean,
 
@@ -283,6 +289,9 @@ Polymer({
         printer => /** @type {!PrinterListEntry} */ (
             {printerInfo: printer, printerType: PrinterType.SAVED}));
     this.entryManager_.setSavedPrintersList(this.savedPrinters_);
+    // Used to delay rendering nearby and add printer sections to prevent
+    // "Add Printer" flicker when clicking "Printers" in settings page.
+    this.attemptedLoadingPrinters_ = true;
   },
 
   /** @private */