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,7 +114,7 @@
         </settings-cups-saved-printers>
       </div>
     </template>
-
+    <template is="dom-if" if="[[attemptedLoadingPrinters_]]">
       <div class="padded first" id="nearbyPrinters">
         <div aria-label$="[[nearbyPrintersAriaLabel_]]">
           $i18n{nearbyPrintersListTitle}
@@ -154,6 +154,7 @@
             printers-count="{{nearbyPrinterCount_}}">
         </settings-cups-nearby-printers>
       </template>
+    </template>
 
     <settings-cups-add-printer-dialog id="addPrinterDialog"
         on-close="onAddPrinterDialogClose_">

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 */