fix: more resilient system for page pre-rendering

Author: gregberge

packages/smooth/src/page/Page.js

@@ -4,6 +4,7 @@ import App from '__smooth_app'
 import Content from '__smooth_content'
 import { applyHook } from '../plugin/browser'
 import { PageContextProvider } from './PageContext'
+import { usePause } from '../router/HiddenRouter'
 
 function getFileName(filePath) {
   return filePath.replace(/^\.\//, '').replace(/\.js$/, '')
@@ -110,9 +111,11 @@ export default function Page({
   location,
 }) {
   const pageRef = usePageRef(page)
+  const unpause = usePause()
   return (
     <page.LoadableComponent>
       {pageModule => {
+        unpause()
         enrichPageRef(pageRef, {
           module: pageModule,
           indexUrl,

packages/smooth/src/query/Query.js

@@ -1,8 +1,8 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import qs from 'query-string'
 import { Query as ApolloQuery } from 'react-apollo'
 import { usePageContext } from '../page/PageContext'
-import { useHiddenRouter } from '../router/HiddenRouter'
+import { usePause } from '../router/HiddenRouter'
 
 function getQueryContext(location, lang) {
   const { id, preview } = qs.parse(location.search)
@@ -21,24 +21,12 @@ function getQueryContext(location, lang) {
 }
 
 function PrefetchHandler({ children, ...props }) {
-  const hiddenRouter = useHiddenRouter()
-  const resolveRef = useRef()
-  const { loading } = props
+  const unpause = usePause()
   useEffect(() => {
-    if (!hiddenRouter) return
-    if (loading) {
-      hiddenRouter.waitForPromise(
-        new Promise(resolve => {
-          resolveRef.current = resolve
-        }),
-      )
-      return
+    if (!props.loading) {
+      unpause()
     }
-    if (resolveRef.current) {
-      resolveRef.current()
-    }
-  }, [loading]) // eslint-disable-line react-hooks/exhaustive-deps
-
+  }, [props.loading, unpause])
   return children(props)
 }
 

packages/smooth/src/router/HiddenRouter.js

@@ -1,10 +1,10 @@
 import React, {
-  useEffect,
   useRef,
   useCallback,
   createContext,
   useContext,
   useMemo,
+  useEffect,
 } from 'react'
 import { createPath } from 'history'
 import { Router, withRouter } from 'react-router-dom'
@@ -16,6 +16,24 @@ export function useHiddenRouter() {
   return useContext(HiddenRouterContext)
 }
 
+export function usePause() {
+  const resolve = useRef()
+  const promise = useMemo(
+    () =>
+      new Promise(r => {
+        resolve.current = r
+      }),
+    [],
+  )
+  const hiddenRouter = useHiddenRouter()
+  useEffect(() => {
+    if (hiddenRouter) {
+      hiddenRouter.waitForPromise(promise)
+    }
+  }, [hiddenRouter, promise])
+  return resolve.current
+}
+
 function createURL(location) {
   return typeof location === 'string' ? location : createPath(location)
 }
@@ -33,12 +51,15 @@ function HiddenRouter({ history, children }) {
 
   const waitForPromise = useCallback(
     promise => {
+      if (promises.current.includes(promise)) return
       promise.then(() => {
         const index = promises.current.indexOf(promise)
         if (index !== -1) {
           promises.current.splice(index, 1)
         }
-        flush()
+        // 65ms is 4 frames, pretty invisible when we change page
+        // it ensures that React have time to start a new request for an example
+        setTimeout(() => flush(), 65)
       })
       promises.current.push(promise)
     },
@@ -47,11 +68,6 @@ function HiddenRouter({ history, children }) {
 
   const hiddenRouter = useMemo(() => ({ waitForPromise }), [waitForPromise])
 
-  useEffect(() => {
-    const timeout = setTimeout(() => flush(), 20)
-    return () => clearTimeout(timeout)
-  }, [flush])
-
   const staticHistory = useMemo(() => {
     if (!hiddenHistory.location) return null
     const noop = () => {}