Flash of Unstyled Content in Safari for quickstart plus a CSS file

thomasballinger commented 3 days ago

Which project does this relate to?

Start

Describe the bug

I see a flash of unstyled content for a pretty minimal setup.

follow the getting started guide

add a CSS file (I used div: { border: solid 20px red; } in app/styes/app.css and loaded it by adding

import appCss from "../styles/app.css?url";
...
export const Route = createRootRoute({
...
links: () => [{ rel: "stylesheet", href: appCss }],
...

to createRootRoute in app/routes/__root.tsx

deploy to Vercel with build command npm run build
turn off the Vercel toolbar and Vercel protection (the vercel toolbar seems necessary, not sure on the latter)

Your Example Website or App

https://start-repro.vercel.app

Steps to Reproduce the Bug or Issue

Here's the repo, deploy it on Vercel and turn off the toolbar.

Here's the link where I have it deployed: https://start-repro.vercel.app/

Load the page in desktop Safari on a mac. Load it a few times, notice the flash. Especially noticeable on an iphone for me.

Or clone the repo, npm i; npm run dev, open it in Safari and open network dev tools and disable caches to debug the dev build.

Expected behavior

I expect no flash.

Screenshots or Videos

https://github.com/user-attachments/assets/0cd750a6-010f-4460-ade6-a4e74592e70e

Platform

OS: macOS, iOS
Browser: Safari

Additional context

No response

thomasballinger commented 3 days ago

Noteably there's not hydration error visible in the console here.

thomasballinger commented 3 days ago

Oh cool, I can repro locally with

npx vinxi build --preset node-server
npx vinxi start

or even dev

npm run dev

if I open in Safari and click "Disable Caches" in the Network devtools tab

thomasballinger commented 3 days ago

Here's a maybe interesting diff? By stepping through the React code (in dev mode, where I could repro this issue) I saw React first committing the body, then later the head. prettier.format(console.log($('html').innerHTML)) before and after got me this diff. https://gist.github.com/thomasballinger/679ef30071a682cb5da3738940140b5b

--- stuff.html  2024-11-04 18:33:00
+++ right.html  2024-11-04 17:09:24
@@ -1,15 +1,21 @@
-<head></head>
+<head>
+  <meta name="tsr-meta" />
+  <title>TanStack Start Starter</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/_build/app/styles/app.css" />
+  <meta name="/tsr-meta" />
+</head>
 <body>
   <div id="root">
-    <!--$--><button type="button">Add 1?</button
-    ><!--/$-->
+    <!--$--><button type="button">Add 1?</button><!--/$-->
     <script>
       window.__vite_plugin_react_preamble_installed__ = true;
     </script>
     <script
       src="/_build/@fs/Users/tomb/start-repro/app/client.tsx"
       type="module"
       async=""
     ></script>
   </div>
 </body>

hopefully that's not something I got because I hacked up my React source. Any leads on why React might commit these separately?

TanStack / router