Turbo should wait for new CSS to be loaded before rendering new pages/frames

[manuelpuyol]

CSS is a render blocking resource, so normally the browser will wait for it to be loaded before continuing rendering the page.

When navigating using either Turbo Drive, Turbo will add new Stylesheets coming from the response to the head, but won't wait until they are loaded to render the new body, causing jitter in the page in case the new CSS changes the layout.''

In this (extreme) example, I'm throttling the request to a CSS file by 1s to showcase the bug:

Screen.Recording.2022-06-28.at.3.19.49.PM.mov

Using the same throttle, but with data-turbo="false":

Screen.Recording.2022-06-28.at.3.21.40.PM.mov

[seanpdoyle]

Thank you for opening this issue!

I wonder what our options are for synchronizing their load times.

Maybe we could attach load and error listeners to <link> elements when a <turbo-frame> response contains a new element, transform those into Promise instances, then incorporate them into the Frame resolution.

function waitForLoad(element: HTMLLinkElement): Promise<void> {
  return new Promise((resolve, reject) => {
    const onLoad = () => {
      element.removeEventListener("error", onError)
      resolve()
    }
    const onError = () => {
      element.removeEventListener("load", onLoad)
      reject()
    }

    element.addEventListener("load", onLoad, { once: true })
    element.addEventListener("error", onError, { once: true })
  })
}

const linkElementsLoadedInFrameResponse = ...

await Promise.all(linkElementsLoadedInFrameResponse.map(waitForLoad))

[manuelpuyol]

I have #614 for visits, but I couldn't find how Frames deal with new CSS. I see

turbo/src/core/frames/frame_renderer.ts

Lines 48 to 53 in 98cdc40

	activateScriptElements() {
	for (const inertScriptElement of this.newScriptElements) {
	const activatedScriptElement = this.createScriptElement(inertScriptElement)
	inertScriptElement.replaceWith(activatedScriptElement)
	}
	}

but nothing for stylesheets

[jody90]

I encountered the same problem. Is there already a solution for the behavior in frames?