Wait for CSS to be loaded before replacing the Body

src/core/drive/page_renderer.ts

@@ -1,6 +1,7 @@
 import { Renderer } from "../renderer"
 import { PageSnapshot } from "./page_snapshot"
 import { ReloadReason } from "../native/browser_adapter"
+import { waitForLoad } from "../../util"
 
 export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
   static renderElement(currentElement: HTMLBodyElement, newElement: HTMLBodyElement) {
@@ -29,8 +30,8 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
     }
   }
 
-  prepareToRender() {
-    this.mergeHead()
+  async prepareToRender() {
+    await this.mergeHead()
   }
 
   async render() {
@@ -58,11 +59,12 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
     return this.newSnapshot.element
   }
 
-  mergeHead() {
-    this.copyNewHeadStylesheetElements()
+  async mergeHead() {
+    const newStylesheetElements = this.copyNewHeadStylesheetElements()
     this.copyNewHeadScriptElements()
     this.removeCurrentHeadProvisionalElements()
     this.copyNewHeadProvisionalElements()
+    await newStylesheetElements
   }
 
   replaceBody() {
@@ -76,10 +78,16 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
     return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature
   }
 
-  copyNewHeadStylesheetElements() {
+  async copyNewHeadStylesheetElements() {
+    const loadingElements = []
+
     for (const element of this.newHeadStylesheetElements) {
+      loadingElements.push(waitForLoad(element as HTMLLinkElement))
+
       document.head.appendChild(element)
     }
+
+    await Promise.all(loadingElements)
   }
 
   copyNewHeadScriptElements() {

src/core/view.ts

@@ -87,7 +87,7 @@ export abstract class View<
       try {
         this.renderPromise = new Promise((resolve) => (this.resolveRenderPromise = resolve))
         this.renderer = renderer
-        this.prepareToRenderSnapshot(renderer)
+        await this.prepareToRenderSnapshot(renderer)
 
         const renderInterception = new Promise((resolve) => (this.resolveInterceptionPromise = resolve))
         const options = { resume: this.resolveInterceptionPromise, render: this.renderer.renderElement }
@@ -112,9 +112,9 @@ export abstract class View<
     this.delegate.viewInvalidated(reason)
   }
 
-  prepareToRenderSnapshot(renderer: R) {
+  async prepareToRenderSnapshot(renderer: R) {
     this.markAsPreview(renderer.isPreview)
-    renderer.prepareToRender()
+    await renderer.prepareToRender()
   }
 
   markAsPreview(isPreview: boolean) {

src/tests/functional/rendering_tests.ts

@@ -187,6 +187,74 @@ test("test does not evaluate head stylesheet elements inside noscript elements",
   assert.equal(await isNoscriptStylesheetEvaluated(page), false)
 })
 
+test("test waits for CSS to be loaded before rendering", async ({ page }) => {
+  let finishLoadingCSS = (_value?: unknown) => {}
+  const promise = new Promise((resolve) => {
+    finishLoadingCSS = resolve
+  })
+  page.route("**/*.css", async (route) => {
+    await promise
+    route.continue()
+  })
+
+  await page.click("#additional-assets-link")
+
+  assert.equal(await isStylesheetEvaluated(page), false)
+  assert.notEqual(await page.textContent("h1"), "Additional assets")
+
+  finishLoadingCSS()
+
+  await nextEventNamed(page, "turbo:render")
+
+  assert.equal(await page.textContent("h1"), "Additional assets")
+  assert.equal(await isStylesheetEvaluated(page), true)
+})
+
+test("test waits for CSS to fail before rendering", async ({ page }) => {
+  let finishLoadingCSS = (_value?: unknown) => {}
+  const promise = new Promise((resolve) => {
+    finishLoadingCSS = resolve
+  })
+  page.route("**/*.css", async (route) => {
+    await promise
+    route.abort()
+  })
+
+  await page.click("#additional-assets-link")
+
+  assert.equal(await isStylesheetEvaluated(page), false)
+  assert.notEqual(await page.textContent("h1"), "Additional assets")
+
+  finishLoadingCSS()
+
+  await nextEventNamed(page, "turbo:render")
+
+  assert.equal(await page.textContent("h1"), "Additional assets")
+  assert.equal(await isStylesheetEvaluated(page), false)
+})
+
+test("test waits for some time, but renders if CSS takes too much to load", async ({ page }) => {
+  let finishLoadingCSS = (_value?: unknown) => {}
+  const promise = new Promise((resolve) => {
+    finishLoadingCSS = resolve
+  })
+  page.route("**/*.css", async (route) => {
+    await promise
+    route.continue()
+  })
+
+  await page.click("#additional-assets-link")
+  await nextEventNamed(page, "turbo:render")
+
+  assert.equal(await page.textContent("h1"), "Additional assets")
+  assert.equal(await isStylesheetEvaluated(page), false)
+
+  finishLoadingCSS()
+  await nextBeat()
+
+  assert.equal(await isStylesheetEvaluated(page), true)
+})
+
 test("skip evaluates head script elements once", async ({ page }) => {
   assert.equal(await headScriptEvaluationCount(page), undefined)
 

src/util.ts

@@ -98,6 +98,20 @@ export function clearBusyState(...elements: Element[]) {
   }
 }
 
+export function waitForLoad(element: HTMLLinkElement, timeoutInMilliseconds = 2000): Promise<void> {
+  return new Promise((resolve) => {
+    const onComplete = () => {
+      element.removeEventListener("error", onComplete)
+      element.removeEventListener("load", onComplete)
+      resolve()
+    }
+
+    element.addEventListener("load", onComplete, { once: true })
+    element.addEventListener("error", onComplete, { once: true })
+    setTimeout(resolve, timeoutInMilliseconds)
+  })
+}
+
 export function getHistoryMethodForAction(action: Action) {
   switch (action) {
     case "replace":