support user custom loading component

fix: #123
vitejs · Apr 10, 2023 · 596ccf3 · 596ccf3
1 parent 2963b93
commit 596ccf3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/theme-doc/src/ThemeConfig.doc.ts b/packages/theme-doc/src/ThemeConfig.doc.ts
@@ -43,10 +43,14 @@ export interface ThemeConfig {
     | FooterConfig
     | ((ctx: ThemeContextValue) => FooterConfig | null | undefined)
   /**
-   * View to be rendered when app in 404 state
+   * Component to be rendered when app in 404 state
    * (url not matching any page)
    */
   Component404?: React.ComponentType<React.PropsWithChildren<unknown>>
+  /**
+   * Component to be rendered when app is loading js bundle
+   */
+  ComponentLoading?: React.ComponentType<React.PropsWithChildren<unknown>>
   /**
    * Wrap the App with custom Component.
    * You can use `useThemeCtx()` in it to get context info

diff --git a/packages/theme-doc/src/index.tsx b/packages/theme-doc/src/index.tsx
@@ -29,7 +29,7 @@ export function createTheme(
 
     const location = useLocation()
     useIsomorphicLayoutEffect(() => {
-      // scroll to anchor after page component loaded
+      // scroll to anchor link after page component loaded
       if (loadState.type === 'loaded') {
         if (location.hash) {
           AnchorLink.scrollToAnchor(decodeURIComponent(location.hash.slice(1)))
@@ -40,7 +40,10 @@ export function createTheme(
     }, [loadState, location.hash])
 
     if (loadState.type === 'loading') {
-      return <AppLayout></AppLayout>
+      const ComponentLoading = themeConfig.ComponentLoading
+      return (
+        <AppLayout>{ComponentLoading ? <ComponentLoading /> : null}</AppLayout>
+      )
     }
 
     if (loadState.type === 'load-error') {