From 8b44f0b955c54a3152f26e8f91a059bd5f1cc867 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Wed, 13 Jul 2022 19:50:07 +0200
Subject: [PATCH] fix: remove hide-fouc tag earlier

---
 packages/next/client/app-index.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx
index 52254f9663e9..92fffb331471 100644
--- a/packages/next/client/app-index.tsx
+++ b/packages/next/client/app-index.tsx
@@ -164,11 +164,14 @@ async function loadCss(cssChunkInfoJson: string) {
   return Promise.resolve()
 }
 
-function createLoadFlightCssStream() {
+function createLoadFlightCssStream(onFlightCssLoaded: () => void) {
+  const promises: Promise<any>[] = []
+  let cssFlushed = false
+
   const loadCssFromStreamData = (data: string) => {
     if (data.startsWith('CSS')) {
       const cssJson = data.slice(4).trim()
-      loadCss(cssJson)
+      promises.push(loadCss(cssJson))
     }
   }
 
@@ -182,6 +185,11 @@ function createLoadFlightCssStream() {
             loadCssFromStreamData(buf)
           } else {
             controller.enqueue(new TextEncoder().encode(buf))
+
+            if (!cssFlushed) {
+              cssFlushed = true
+              Promise.all(promises).then(() => onFlightCssLoaded())
+            }
           }
         }
       }
@@ -202,7 +210,10 @@ function createLoadFlightCssStream() {
   return loadCssFromFlight
 }
 
-function useInitialServerResponse(cacheKey: string) {
+function useInitialServerResponse(
+  cacheKey: string,
+  onFlightCssLoaded: () => void
+) {
   const response = rscCache.get(cacheKey)
   if (response) return response
 
@@ -213,7 +224,7 @@ function useInitialServerResponse(cacheKey: string) {
   })
 
   const newResponse = createFromReadableStream(
-    readable.pipeThrough(createLoadFlightCssStream())
+    readable.pipeThrough(createLoadFlightCssStream(onFlightCssLoaded))
   )
 
   rscCache.set(cacheKey, newResponse)
@@ -230,12 +241,7 @@ function ServerRoot({
   React.useEffect(() => {
     rscCache.delete(cacheKey)
   })
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'development') {
-      onFlightCssLoaded?.()
-    }
-  }, [onFlightCssLoaded])
-  const response = useInitialServerResponse(cacheKey)
+  const response = useInitialServerResponse(cacheKey, onFlightCssLoaded)
   const root = response.readRoot()
   return root
 }