Defer --dialog-scrollgutter computation to avoid synchronous reflow on page load (#3950)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Jon Rohan <rohan@github.com>

Author: 3 people

.changeset/dialog-scrollgutter-lazy.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Defer `--dialog-scrollgutter` computation in `DialogHelperElement` to the moment a dialog is first opened, avoiding a forced synchronous layout reflow during page load.

app/components/primer/dialog_helper.ts

@@ -1,3 +1,8 @@
+function setScrollGutter(doc: Document) {
+  if (doc.body.style.getPropertyValue('--dialog-scrollgutter')) return
+  doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`)
+}
+
 function dialogInvokerButtonHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
@@ -9,6 +14,7 @@ function dialogInvokerButtonHandler(event: Event) {
   if (dialogId) {
     const dialog = document.getElementById(dialogId)
     if (dialog instanceof HTMLDialogElement) {
+      setScrollGutter(dialog.ownerDocument)
       dialog.showModal()
       // A buttons default behaviour in some browsers it to send a pointer event
       // If the behaviour is allowed through the dialog will be shown but then
@@ -85,10 +91,6 @@ export class DialogHelperElement extends HTMLElement {
     const {signal} = (this.#abortController = new AbortController())
     document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
-    this.ownerDocument.body.style.setProperty(
-      '--dialog-scrollgutter',
-      `${window.innerWidth - this.ownerDocument.body.clientWidth}px`,
-    )
     new MutationObserver(records => {
       for (const record of records) {
         if (record.target === this.dialog) {
@@ -110,6 +112,7 @@ export class DialogHelperElement extends HTMLElement {
       // eslint-disable-next-line no-restricted-syntax
       this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
       this.dialog.close()
+      setScrollGutter(this.dialog.ownerDocument)
       this.dialog.showModal()
     }
   }