Skip to content

Commit

Permalink
fix: remove pending timings
Browse files Browse the repository at this point in the history
  • Loading branch information
@tannerlinsley
tannerlinsley committed Nov 15, 2022
1 parent 8acb8a4 commit 2294802
Show file tree
Hide file tree
Showing 10 changed files with 50 additions and 247 deletions.
62 changes: 13 additions & 49 deletions examples/react/kitchen-sink-codesplit/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,7 @@ function App() {
// This stuff is just to tweak our sandbox setup in real-time
const [loaderDelay, setLoaderDelay] = useSessionStorage('loaderDelay', 500)
const [actionDelay, setActionDelay] = useSessionStorage('actionDelay', 500)
const [defaultPendingMs, setDefaultPendingMs] = useSessionStorage(
'defaultPendingMs',
2000,
)
const [defaultPendingMinMs, setDefaulPendingMinMs] = useSessionStorage(
'defaultPendingMinMs',
500,
)

const [defaultLoaderMaxAge, setDefaultLoaderMaxAge] = useSessionStorage(
'defaultLoaderMaxAge',
5000,
Expand All @@ -28,6 +21,15 @@ function App() {
2000,
)

const PendingComponent = React.useCallback(
() => (
<div className={`p-2 text-2xl`}>
<Spinner />
</div>
),
[],
)

return (
<>
{/* More stuff to tweak our sandbox setup in real-time */}
Expand All @@ -44,35 +46,7 @@ function App() {
className="w-full"
/>
</div>
<div>
Default Pending Ms: {defaultPendingMs}ms{' '}
{defaultPendingMs > loaderDelay ? <>🔴</> : <>🟢</>}
</div>
<div>
<input
type="range"
min="0"
max="5000"
step="100"
value={defaultPendingMs}
onChange={(e) => setDefaultPendingMs(e.target.valueAsNumber)}
className="w-full"
/>
</div>
<div className={`${!defaultPendingMs ? 'opacity-30' : ''}`}>
<div>Default Min Pending Ms: {defaultPendingMinMs}ms</div>
<div>
<input
type="range"
min="0"
max="5000"
step="100"
value={defaultPendingMinMs}
onChange={(e) => setDefaulPendingMinMs(e.target.valueAsNumber)}
className={`w-full`}
/>
</div>
</div>

<div>Action Delay: {actionDelay}ms</div>
<div>
<input
Expand Down Expand Up @@ -119,22 +93,12 @@ function App() {
<AuthProvider>
<RouterProvider
router={router}
defaultPendingElement={
<div className={`p-2 text-2xl`}>
<Spinner />
</div>
}
defaultPendingComponent={PendingComponent}
defaultLoaderMaxAge={defaultLoaderMaxAge}
defaultPreloadMaxAge={defaultPreloadMaxAge}
defaultPendingMs={defaultPendingMs}
defaultPendingMinMs={defaultPendingMinMs}
// Normally, the options above aren't changing, but for this particular
// example, we need to key the router when they change
key={[
defaultPreloadMaxAge,
defaultPendingMs,
defaultPendingMinMs,
].join('.')}
key={[defaultPreloadMaxAge].join('.')}
>
{/* Normally <Router /> acts as it's own outlet,
but if we pass it children, route matching is
Expand Down
4 changes: 1 addition & 3 deletions examples/react/kitchen-sink-codesplit/src/routes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ function Home() {
elements are ready.
<hr className={`my-2`} />
To exaggerate async effects, play with the artificial request delay
slider in the bottom-left corner. You can also play with the default
timings for displaying the pending fallbacks and the minimum time any
pending fallbacks will remain shown.
slider in the bottom-left corner.
<hr className={`my-2`} />
The last 2 sliders determine if link-hover preloading is enabled (and
how long those preloads stick around) and also whether to cache rendered
Expand Down
62 changes: 13 additions & 49 deletions examples/react/kitchen-sink-routegen/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,7 @@ function App() {
// This stuff is just to tweak our sandbox setup in real-time
const [loaderDelay, setLoaderDelay] = useSessionStorage('loaderDelay', 500)
const [actionDelay, setActionDelay] = useSessionStorage('actionDelay', 500)
const [defaultPendingMs, setDefaultPendingMs] = useSessionStorage(
'defaultPendingMs',
2000,
)
const [defaultPendingMinMs, setDefaulPendingMinMs] = useSessionStorage(
'defaultPendingMinMs',
500,
)

const [defaultLoaderMaxAge, setDefaultLoaderMaxAge] = useSessionStorage(
'defaultLoaderMaxAge',
5000,
Expand All @@ -28,6 +21,15 @@ function App() {
2000,
)

const PendingComponent = React.useCallback(
() => (
<div className={`p-2 text-2xl`}>
<Spinner />
</div>
),
[],
)

return (
<>
{/* More stuff to tweak our sandbox setup in real-time */}
Expand All @@ -44,35 +46,7 @@ function App() {
className="w-full"
/>
</div>
<div>
Default Pending Ms: {defaultPendingMs}ms{' '}
{defaultPendingMs > loaderDelay ? <>🔴</> : <>🟢</>}
</div>
<div>
<input
type="range"
min="0"
max="5000"
step="100"
value={defaultPendingMs}
onChange={(e) => setDefaultPendingMs(e.target.valueAsNumber)}
className="w-full"
/>
</div>
<div className={`${!defaultPendingMs ? 'opacity-30' : ''}`}>
<div>Default Min Pending Ms: {defaultPendingMinMs}ms</div>
<div>
<input
type="range"
min="0"
max="5000"
step="100"
value={defaultPendingMinMs}
onChange={(e) => setDefaulPendingMinMs(e.target.valueAsNumber)}
className={`w-full`}
/>
</div>
</div>

<div>Action Delay: {actionDelay}ms</div>
<div>
<input
Expand Down Expand Up @@ -119,22 +93,12 @@ function App() {
<AuthProvider>
<RouterProvider
router={router}
defaultPendingElement={
<div className={`p-2 text-2xl`}>
<Spinner />
</div>
}
defaultPendingComponent={PendingComponent}
defaultLoaderMaxAge={defaultLoaderMaxAge}
defaultPreloadMaxAge={defaultPreloadMaxAge}
defaultPendingMs={defaultPendingMs}
defaultPendingMinMs={defaultPendingMinMs}
// Normally, the options above aren't changing, but for this particular
// example, we need to key the router when they change
key={[
defaultPreloadMaxAge,
defaultPendingMs,
defaultPendingMinMs,
].join('.')}
key={[defaultPreloadMaxAge].join('.')}
>
{/* Normally <Router /> acts as it's own outlet,
but if we pass it children, route matching is
Expand Down
4 changes: 1 addition & 3 deletions examples/react/kitchen-sink-routegen/src/routes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,7 @@ function Home() {
elements are ready.
<hr className={`my-2`} />
To exaggerate async effects, play with the artificial request delay
slider in the bottom-left corner. You can also play with the default
timings for displaying the pending fallbacks and the minimum time any
pending fallbacks will remain shown.
slider in the bottom-left corner.
<hr className={`my-2`} />
The last 2 sliders determine if link-hover preloading is enabled (and
how long those preloads stick around) and also whether to cache rendered
Expand Down
51 changes: 4 additions & 47 deletions examples/react/kitchen-sink/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,14 +171,7 @@ function App() {
// This stuff is just to tweak our sandbox setup in real-time
const [loaderDelay, setLoaderDelay] = useSessionStorage('loaderDelay', 500)
const [actionDelay, setActionDelay] = useSessionStorage('actionDelay', 500)
const [defaultPendingMs, setDefaultPendingMs] = useSessionStorage(
'defaultPendingMs',
2000,
)
const [defaultPendingMinMs, setDefaulPendingMinMs] = useSessionStorage(
'defaultPendingMinMs',
500,
)

const [defaultLoaderMaxAge, setDefaultLoaderMaxAge] = useSessionStorage(
'defaultLoaderMaxAge',
5000,
Expand All @@ -204,35 +197,7 @@ function App() {
className="w-full"
/>
</div>
<div>
Default Pending Ms: {defaultPendingMs}ms{' '}
{defaultPendingMs > loaderDelay ? <>🔴</> : <>🟢</>}
</div>
<div>
<input
type="range"
min="0"
max="5000"
step="100"
value={defaultPendingMs}
onChange={(e) => setDefaultPendingMs(e.target.valueAsNumber)}
className="w-full"
/>
</div>
<div className={`${!defaultPendingMs ? 'opacity-30' : ''}`}>
<div>Default Min Pending Ms: {defaultPendingMinMs}ms</div>
<div>
<input
type="range"
min="0"
max="5000"
step="100"
value={defaultPendingMinMs}
onChange={(e) => setDefaulPendingMinMs(e.target.valueAsNumber)}
className={`w-full`}
/>
</div>
</div>

<div>Action Delay: {actionDelay}ms</div>
<div>
<input
Expand Down Expand Up @@ -288,17 +253,11 @@ function App() {
defaultPreload="intent"
defaultLoaderMaxAge={defaultLoaderMaxAge}
defaultPreloadMaxAge={defaultPreloadMaxAge}
defaultPendingMs={defaultPendingMs}
defaultPendingMinMs={defaultPendingMinMs}
// defaultLoaderMaxAge={5 * 1000}
// defaultLoaderGcMaxAge={10 * 1000}
// Normally, the options above aren't changing, but for this particular
// example, we need to key the router when they change
key={[
defaultPreloadMaxAge,
defaultPendingMs,
defaultPendingMinMs,
].join('.')}
key={[defaultPreloadMaxAge].join('.')}
>
<Root />
</RouterProvider>
Expand Down Expand Up @@ -398,9 +357,7 @@ function Home() {
elements are ready.
<hr className={`my-2`} />
To exaggerate async effects, play with the artificial request delay
slider in the bottom-left corner. You can also play with the default
timings for displaying the pending fallbacks and the minimum time any
pending fallbacks will remain shown.
slider in the bottom-left corner.
<hr className={`my-2`} />
The last 2 sliders determine if link-hover preloading is enabled (and
how long those preloads stick around) and also whether to cache rendered
Expand Down
6 changes: 2 additions & 4 deletions examples/react/with-trpc/client/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ function App() {
in <Root /> before rendering any routes */}
<RouterProvider
router={router}
defaultPendingElement={
defaultPendingComponent={
<div className={`p-2 text-2xl`}>
<Spinner />
</div>
Expand Down Expand Up @@ -178,9 +178,7 @@ function Home() {
elements are ready.
<hr className={`my-2`} />
To exaggerate async effects, play with the artificial request delay
slider in the bottom-left corner. You can also play with the default
timings for displaying the pending fallbacks and the minimum time any
pending fallbacks will remain shown.
slider in the bottom-left corner.
<hr className={`my-2`} />
The last 2 sliders determine if link-hover preloading is enabled (and
how long those preloads stick around) and also whether to cache rendered
Expand Down
34 changes: 10 additions & 24 deletions packages/react-router/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,37 +492,23 @@ export function Outlet() {
{
((): React.ReactNode => {
if (match.status === 'error') {
if (errorComponent) {
return React.createElement(errorComponent as any)
}

// if (
// match.options.useErrorBoundary ||
// router.options.useErrorBoundary
// ) {
throw match.error
// }
}

if (match.status !== 'success' && match.__.loadPromise) {
if (match.status === 'success') {
return React.createElement(
(match.__.component as any) ??
router.options.defaultComponent ??
Outlet,
)
}

if (match.__.loadPromise) {
console.log(match.matchId, 'suspend')
throw match.__.loadPromise

// if (match.isPending) {

// if (match.options.pendingMs || pendingComponent) {
// return React.createElement(pendingComponent as any) ?? null
// }
// }
}

console.log(match.matchId, match.status)

return React.createElement(
(match.__.component as any) ??
router.options.defaultComponent ??
Outlet,
)
invariant(false, 'This should never happen!')
})() as JSX.Element
}
</CatchBoundary>
Expand Down
6 changes: 1 addition & 5 deletions packages/router-core/src/routeConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,15 +108,11 @@ export type RouteOptions<
// Filter functions that can manipulate search params *after* they are passed to links and navigate
// calls that match this route.
postSearchFilters?: SearchFilter<TFullSearchSchema>[]
// The duration to wait during `loader` execution before showing the `pendingComponent`
pendingMs?: number
// _If the `pendingComponent` is shown_, the minimum duration for which it will be visible.
pendingMinMs?: number
// The content to be rendered when the route is matched. If no component is provided, defaults to `<Outlet />`
component?: GetFrameworkGeneric<'Component'> // , NoInfer<TLoaderData>>
// The content to be rendered when the route encounters an error
errorComponent?: GetFrameworkGeneric<'Component'> // , NoInfer<TLoaderData>>
// The content to be rendered when the duration of `loader` execution surpasses the `pendingMs` duration
// If supported by your framework, the content to be rendered as the fallback content until the route is ready to render
pendingComponent?: GetFrameworkGeneric<'Component'> //, NoInfer<TLoaderData>>
// An asynchronous function responsible for preparing or fetching data for the route before it is rendered
loader?: LoaderFn<TRouteLoaderData, TFullSearchSchema, TAllParams>
Expand Down
Loading

0 comments on commit 2294802

Please sign in to comment.