Bug 1658067 - Don't reflow when sheet count loads r=emalysz

Differential Revision: https://phabricator.services.mozilla.com/D86774

toolkit/components/printing/content/print.css

@@ -82,6 +82,10 @@ body {
   margin: 0;
 }
 
+#sheet-count[loading] {
+  visibility: hidden;
+}
+
 form#print {
   display: flex;
   flex: 1 1 auto;

toolkit/components/printing/content/print.html

@@ -59,7 +59,7 @@
 
     <header class="header-container">
       <h2 data-l10n-id="printui-title"></h2>
-      <p id="sheet-count" is="page-count" hidden></p>
+      <p id="sheet-count" is="page-count" data-l10n-id="printui-sheets-count" data-l10n-args='{ "sheetCount": 0 }' loading></p>
     </header>
 
     <form id="print" is="print-form" aria-labelledby="page-header">

toolkit/components/printing/content/print.js

@@ -612,9 +612,7 @@ class PageCount extends PrintUIControlMixin(HTMLElement) {
     document.l10n.setAttributes(this, "printui-sheets-count", {
       sheetCount: this.numPages * this.numCopies,
     });
-    if (this.hidden) {
-      document.l10n.translateElements([this]).then(() => (this.hidden = false));
-    }
+    this.removeAttribute("loading");
   }
 
   handleEvent(e) {