react:feat Props loader indicators

frandiox · Apr 6, 2021 · 62df6d6 · 62df6d6
1 parent d74560a
commit 62df6d6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/examples/react/src/pages/post/index.jsx b/examples/react/src/pages/post/index.jsx
@@ -1,6 +1,10 @@
 import React from 'react'
 
-const Post = ({ params = {} }) => {
+const Post = ({ params = {}, isLoadingProps, isRevalidatingProps }) => {
+  if (!import.meta.env.SSR) {
+    console.log({ isLoadingProps, isRevalidatingProps })
+  }
+
   return (
     <div>
       <h1>Post #{params.postId}</h1>

diff --git a/src/react/entry-client.js b/src/react/entry-client.js
@@ -23,6 +23,8 @@ export function PropsProvider({
   lastRoutePath = to.path
 
   const [state, setState] = useState(to.meta.state)
+  let isLoadingProps = false
+  let isRevalidatingProps = false
 
   if (!to.meta.state || isChangingRoute) {
     if (from && to.path === from.path) {
@@ -35,6 +37,12 @@ export function PropsProvider({
       const propsRoute = buildPropsRoute(to)
 
       if (propsRoute) {
+        if (state) {
+          isRevalidatingProps = true
+        } else {
+          isLoadingProps = true
+        }
+
         fetch(propsRoute.fullPath, {
           method: 'GET',
           headers: { 'Content-Type': 'application/json' },
@@ -46,13 +54,17 @@ export function PropsProvider({
           })
           .catch((error) => {
             console.error(error)
+            to.meta.state = { error }
+            setState(to.meta.state)
           })
       }
     }
   }
 
   const { passToPage } = pagePropsOptions || {}
   return React.createElement(Page, {
+    isLoadingProps,
+    isRevalidatingProps,
     ...((passToPage && state) || {}),
     ...rest,
   })