From fb72534ca3428d9dd91043712fc6a95dacfeb16f Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Wed, 13 Jul 2022 14:47:34 +0200
Subject: [PATCH 1/2] remove hide-fouc tag after hydration

---
 packages/next/client/app-index.tsx | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx
index 95525aced666..5def9514efca 100644
--- a/packages/next/client/app-index.tsx
+++ b/packages/next/client/app-index.tsx
@@ -165,15 +165,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 +200,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 +214,7 @@ function useInitialServerResponse(cacheKey: string, onFlightCssLoaded: any) {
   })
 
   const newResponse = createFromReadableStream(
-    readable.pipeThrough(createLoadFlightCssStream(onFlightCssLoaded))
+    readable.pipeThrough(createLoadFlightCssStream())
   )
 
   rscCache.set(cacheKey, newResponse)
@@ -239,12 +226,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?.()
+    }
+  }, [])
+  const response = useInitialServerResponse(cacheKey)
   const root = response.readRoot()
   return root
 }

From 5162517c4e70c487f77efcd084f69481f7c54d79 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 13 Jul 2022 15:04:20 +0200
Subject: [PATCH 2/2] fix lint

---
 packages/next/client/app-index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx
index 5def9514efca..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 =
@@ -235,7 +234,7 @@ function ServerRoot({
     if (process.env.NODE_ENV === 'development') {
       onFlightCssLoaded?.()
     }
-  }, [])
+  }, [onFlightCssLoaded])
   const response = useInitialServerResponse(cacheKey)
   const root = response.readRoot()
   return root