From b8ed30648d38d5c98107bdbd1123c32d78537df7 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Wed, 13 Jul 2022 15:37:12 +0200
Subject: [PATCH] Remove the `hide-fouc` tags after hydration (#38592)

The current timing (after chunk loaded) isn't accurate enough because React hydrates asynchronously.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)


Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
---
 packages/next/client/app-index.tsx | 31 +++++++++++-------------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx
index 95525aced666..52254f9663e9 100644
--- a/packages/next/client/app-index.tsx
+++ b/packages/next/client/app-index.tsx
@@ -76,7 +76,6 @@ const getCacheKey = () => {
 }
 
 const encoder = new TextEncoder()
-const loadedCss: Set<string> = new Set()
 
 let initialServerDataBuffer: string[] | undefined = undefined
 let initialServerDataWriter: ReadableStreamDefaultController | undefined =
@@ -165,15 +164,11 @@ async function loadCss(cssChunkInfoJson: string) {
   return Promise.resolve()
 }
 
-function createLoadFlightCssStream(callback?: () => Promise<void>) {
-  const cssLoadingPromises: Promise<any>[] = []
+function createLoadFlightCssStream() {
   const loadCssFromStreamData = (data: string) => {
     if (data.startsWith('CSS')) {
       const cssJson = data.slice(4).trim()
-      if (!loadedCss.has(cssJson)) {
-        loadedCss.add(cssJson)
-        cssLoadingPromises.push(loadCss(cssJson))
-      }
+      loadCss(cssJson)
     }
   }
 
@@ -204,19 +199,10 @@ function createLoadFlightCssStream(callback?: () => Promise<void>) {
     },
   })
 
-  if (process.env.NODE_ENV === 'development') {
-    Promise.all(cssLoadingPromises).then(() => {
-      // TODO: find better timing for css injection
-      setTimeout(() => {
-        callback?.()
-      })
-    })
-  }
-
   return loadCssFromFlight
 }
 
-function useInitialServerResponse(cacheKey: string, onFlightCssLoaded: any) {
+function useInitialServerResponse(cacheKey: string) {
   const response = rscCache.get(cacheKey)
   if (response) return response
 
@@ -227,7 +213,7 @@ function useInitialServerResponse(cacheKey: string, onFlightCssLoaded: any) {
   })
 
   const newResponse = createFromReadableStream(
-    readable.pipeThrough(createLoadFlightCssStream(onFlightCssLoaded))
+    readable.pipeThrough(createLoadFlightCssStream())
   )
 
   rscCache.set(cacheKey, newResponse)
@@ -239,12 +225,17 @@ function ServerRoot({
   onFlightCssLoaded,
 }: {
   cacheKey: string
-  onFlightCssLoaded: any
+  onFlightCssLoaded: () => Promise<void>
 }) {
   React.useEffect(() => {
     rscCache.delete(cacheKey)
   })
-  const response = useInitialServerResponse(cacheKey, onFlightCssLoaded)
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      onFlightCssLoaded?.()
+    }
+  }, [onFlightCssLoaded])
+  const response = useInitialServerResponse(cacheKey)
   const root = response.readRoot()
   return root
 }