From f800c7009526e7d5886b107327972efccf3749b5 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Mon, 3 Dec 2018 18:38:22 -0200
Subject: [PATCH] feat(docz): add preload async route

---
 packages/docz/src/components/AsyncRoute.tsx | 17 ++++++++++-------
 packages/docz/src/components/DocPreview.tsx | 11 +++++++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/docz/src/components/AsyncRoute.tsx b/packages/docz/src/components/AsyncRoute.tsx
index 7c337a718..4e52831ec 100644
--- a/packages/docz/src/components/AsyncRoute.tsx
+++ b/packages/docz/src/components/AsyncRoute.tsx
@@ -7,7 +7,7 @@ import { EntryMap } from '../state'
 import { ComponentsMap } from './DocPreview'
 import { AsyncComponent } from './AsyncComponent'
 
-async function loadFromImports(path: string): Promise<SFC<any>> {
+export async function loadFromImports(path: string): Promise<SFC<any>> {
   // tslint:disable-next-line
   const { imports } = await import('~imports')
   const { default: Component, getInitialData } = await imports[path]()
@@ -19,10 +19,16 @@ async function loadFromImports(path: string): Promise<SFC<any>> {
     />
   )
 
-  return ExportedComponent
+  return withMDXComponents(ExportedComponent)
 }
 
+export const loadRoute = (path: string, LoadingComponent: any) =>
+  importedComponent(async () => loadFromImports(path), {
+    LoadingComponent,
+  })
+
 interface AsyncRouteProps {
+  asyncComponent: any
   components: ComponentsMap
   path: string
   entries: EntryMap
@@ -30,19 +36,16 @@ interface AsyncRouteProps {
 
 export const AsyncRoute: SFC<AsyncRouteProps> = ({
   components,
+  asyncComponent,
   path,
   entries,
   ...routeProps
 }) => {
   const Page: any = components.page
-  const LoadingComponent: any = components.loading
+  const Component: any = asyncComponent
   const entry = entries && entries[path]
   const props = { ...routeProps, doc: entry }
 
-  const Component = withMDXComponents(
-    importedComponent(async () => loadFromImports(path), { LoadingComponent })
-  )
-
   return Page ? (
     <Page {...props}>
       <Component {...props} />
diff --git a/packages/docz/src/components/DocPreview.tsx b/packages/docz/src/components/DocPreview.tsx
index 68d46ea5d..84be44a9e 100644
--- a/packages/docz/src/components/DocPreview.tsx
+++ b/packages/docz/src/components/DocPreview.tsx
@@ -4,7 +4,7 @@ import { Switch, Route, RouteComponentProps } from 'react-router-dom'
 import { MDXProvider } from '@mdx-js/tag'
 import { get } from 'lodash/fp'
 
-import { AsyncRoute } from './AsyncRoute'
+import { AsyncRoute, loadRoute } from './AsyncRoute'
 import { state, Entry } from '../state'
 
 export type PageProps = RouteComponentProps<any> & {
@@ -92,13 +92,20 @@ export const DocPreview: SFC<DocPreviewProps> = ({
             {Object.keys(entries).map(path => {
               const entry = get(path, entries)
               const props = { path, entries, components }
+              const component: any = loadRoute(path, components.loading)
+
+              component.preload()
               return (
                 <Route
                   exact
                   key={entry.id}
                   path={entry.route}
                   render={routeProps => (
-                    <AsyncRoute {...routeProps} {...props} />
+                    <AsyncRoute
+                      {...routeProps}
+                      {...props}
+                      asyncComponent={component}
+                    />
                   )}
                 />
               )