Skip to content

Commit 2294802

Browse files
tannerlinsleytannerlinsley
committed
fix: remove pending timings
1 parent 8acb8a4 commit 2294802

File tree

10 files changed

+50
-247
lines changed

10 files changed

+50
-247
lines changed

‎examples/react/kitchen-sink-codesplit/src/main.tsx

+13-49
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,7 @@ function App() {
1111
// This stuff is just to tweak our sandbox setup in real-time
1212
const [loaderDelay, setLoaderDelay] = useSessionStorage('loaderDelay', 500)
1313
const [actionDelay, setActionDelay] = useSessionStorage('actionDelay', 500)
14-
const [defaultPendingMs, setDefaultPendingMs] = useSessionStorage(
15-
'defaultPendingMs',
16-
2000,
17-
)
18-
const [defaultPendingMinMs, setDefaulPendingMinMs] = useSessionStorage(
19-
'defaultPendingMinMs',
20-
500,
21-
)
14+
2215
const [defaultLoaderMaxAge, setDefaultLoaderMaxAge] = useSessionStorage(
2316
'defaultLoaderMaxAge',
2417
5000,
@@ -28,6 +21,15 @@ function App() {
2821
2000,
2922
)
3023

24+
const PendingComponent = React.useCallback(
25+
() => (
26+
<div className={`p-2 text-2xl`}>
27+
<Spinner />
28+
</div>
29+
),
30+
[],
31+
)
32+
3133
return (
3234
<>
3335
{/* More stuff to tweak our sandbox setup in real-time */}
@@ -44,35 +46,7 @@ function App() {
4446
className="w-full"
4547
/>
4648
</div>
47-
<div>
48-
Default Pending Ms: {defaultPendingMs}ms{' '}
49-
{defaultPendingMs > loaderDelay ? <>🔴</> : <>🟢</>}
50-
</div>
51-
<div>
52-
<input
53-
type="range"
54-
min="0"
55-
max="5000"
56-
step="100"
57-
value={defaultPendingMs}
58-
onChange={(e) => setDefaultPendingMs(e.target.valueAsNumber)}
59-
className="w-full"
60-
/>
61-
</div>
62-
<div className={`${!defaultPendingMs ? 'opacity-30' : ''}`}>
63-
<div>Default Min Pending Ms: {defaultPendingMinMs}ms</div>
64-
<div>
65-
<input
66-
type="range"
67-
min="0"
68-
max="5000"
69-
step="100"
70-
value={defaultPendingMinMs}
71-
onChange={(e) => setDefaulPendingMinMs(e.target.valueAsNumber)}
72-
className={`w-full`}
73-
/>
74-
</div>
75-
</div>
49+
7650
<div>Action Delay: {actionDelay}ms</div>
7751
<div>
7852
<input
@@ -119,22 +93,12 @@ function App() {
11993
<AuthProvider>
12094
<RouterProvider
12195
router={router}
122-
defaultPendingElement={
123-
<div className={`p-2 text-2xl`}>
124-
<Spinner />
125-
</div>
126-
}
96+
defaultPendingComponent={PendingComponent}
12797
defaultLoaderMaxAge={defaultLoaderMaxAge}
12898
defaultPreloadMaxAge={defaultPreloadMaxAge}
129-
defaultPendingMs={defaultPendingMs}
130-
defaultPendingMinMs={defaultPendingMinMs}
13199
// Normally, the options above aren't changing, but for this particular
132100
// example, we need to key the router when they change
133-
key={[
134-
defaultPreloadMaxAge,
135-
defaultPendingMs,
136-
defaultPendingMinMs,
137-
].join('.')}
101+
key={[defaultPreloadMaxAge].join('.')}
138102
>
139103
{/* Normally <Router /> acts as it's own outlet,
140104
but if we pass it children, route matching is

‎examples/react/kitchen-sink-codesplit/src/routes/index.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@ function Home() {
3030
elements are ready.
3131
<hr className={`my-2`} />
3232
To exaggerate async effects, play with the artificial request delay
33-
slider in the bottom-left corner. You can also play with the default
34-
timings for displaying the pending fallbacks and the minimum time any
35-
pending fallbacks will remain shown.
33+
slider in the bottom-left corner.
3634
<hr className={`my-2`} />
3735
The last 2 sliders determine if link-hover preloading is enabled (and
3836
how long those preloads stick around) and also whether to cache rendered

‎examples/react/kitchen-sink-routegen/src/main.tsx

+13-49
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,7 @@ function App() {
1111
// This stuff is just to tweak our sandbox setup in real-time
1212
const [loaderDelay, setLoaderDelay] = useSessionStorage('loaderDelay', 500)
1313
const [actionDelay, setActionDelay] = useSessionStorage('actionDelay', 500)
14-
const [defaultPendingMs, setDefaultPendingMs] = useSessionStorage(
15-
'defaultPendingMs',
16-
2000,
17-
)
18-
const [defaultPendingMinMs, setDefaulPendingMinMs] = useSessionStorage(
19-
'defaultPendingMinMs',
20-
500,
21-
)
14+
2215
const [defaultLoaderMaxAge, setDefaultLoaderMaxAge] = useSessionStorage(
2316
'defaultLoaderMaxAge',
2417
5000,
@@ -28,6 +21,15 @@ function App() {
2821
2000,
2922
)
3023

24+
const PendingComponent = React.useCallback(
25+
() => (
26+
<div className={`p-2 text-2xl`}>
27+
<Spinner />
28+
</div>
29+
),
30+
[],
31+
)
32+
3133
return (
3234
<>
3335
{/* More stuff to tweak our sandbox setup in real-time */}
@@ -44,35 +46,7 @@ function App() {
4446
className="w-full"
4547
/>
4648
</div>
47-
<div>
48-
Default Pending Ms: {defaultPendingMs}ms{' '}
49-
{defaultPendingMs > loaderDelay ? <>🔴</> : <>🟢</>}
50-
</div>
51-
<div>
52-
<input
53-
type="range"
54-
min="0"
55-
max="5000"
56-
step="100"
57-
value={defaultPendingMs}
58-
onChange={(e) => setDefaultPendingMs(e.target.valueAsNumber)}
59-
className="w-full"
60-
/>
61-
</div>
62-
<div className={`${!defaultPendingMs ? 'opacity-30' : ''}`}>
63-
<div>Default Min Pending Ms: {defaultPendingMinMs}ms</div>
64-
<div>
65-
<input
66-
type="range"
67-
min="0"
68-
max="5000"
69-
step="100"
70-
value={defaultPendingMinMs}
71-
onChange={(e) => setDefaulPendingMinMs(e.target.valueAsNumber)}
72-
className={`w-full`}
73-
/>
74-
</div>
75-
</div>
49+
7650
<div>Action Delay: {actionDelay}ms</div>
7751
<div>
7852
<input
@@ -119,22 +93,12 @@ function App() {
11993
<AuthProvider>
12094
<RouterProvider
12195
router={router}
122-
defaultPendingElement={
123-
<div className={`p-2 text-2xl`}>
124-
<Spinner />
125-
</div>
126-
}
96+
defaultPendingComponent={PendingComponent}
12797
defaultLoaderMaxAge={defaultLoaderMaxAge}
12898
defaultPreloadMaxAge={defaultPreloadMaxAge}
129-
defaultPendingMs={defaultPendingMs}
130-
defaultPendingMinMs={defaultPendingMinMs}
13199
// Normally, the options above aren't changing, but for this particular
132100
// example, we need to key the router when they change
133-
key={[
134-
defaultPreloadMaxAge,
135-
defaultPendingMs,
136-
defaultPendingMinMs,
137-
].join('.')}
101+
key={[defaultPreloadMaxAge].join('.')}
138102
>
139103
{/* Normally <Router /> acts as it's own outlet,
140104
but if we pass it children, route matching is

‎examples/react/kitchen-sink-routegen/src/routes/index.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,7 @@ function Home() {
3232
elements are ready.
3333
<hr className={`my-2`} />
3434
To exaggerate async effects, play with the artificial request delay
35-
slider in the bottom-left corner. You can also play with the default
36-
timings for displaying the pending fallbacks and the minimum time any
37-
pending fallbacks will remain shown.
35+
slider in the bottom-left corner.
3836
<hr className={`my-2`} />
3937
The last 2 sliders determine if link-hover preloading is enabled (and
4038
how long those preloads stick around) and also whether to cache rendered

‎examples/react/kitchen-sink/src/main.tsx

+4-47
Original file line numberDiff line numberDiff line change
@@ -171,14 +171,7 @@ function App() {
171171
// This stuff is just to tweak our sandbox setup in real-time
172172
const [loaderDelay, setLoaderDelay] = useSessionStorage('loaderDelay', 500)
173173
const [actionDelay, setActionDelay] = useSessionStorage('actionDelay', 500)
174-
const [defaultPendingMs, setDefaultPendingMs] = useSessionStorage(
175-
'defaultPendingMs',
176-
2000,
177-
)
178-
const [defaultPendingMinMs, setDefaulPendingMinMs] = useSessionStorage(
179-
'defaultPendingMinMs',
180-
500,
181-
)
174+
182175
const [defaultLoaderMaxAge, setDefaultLoaderMaxAge] = useSessionStorage(
183176
'defaultLoaderMaxAge',
184177
5000,
@@ -204,35 +197,7 @@ function App() {
204197
className="w-full"
205198
/>
206199
</div>
207-
<div>
208-
Default Pending Ms: {defaultPendingMs}ms{' '}
209-
{defaultPendingMs > loaderDelay ? <>🔴</> : <>🟢</>}
210-
</div>
211-
<div>
212-
<input
213-
type="range"
214-
min="0"
215-
max="5000"
216-
step="100"
217-
value={defaultPendingMs}
218-
onChange={(e) => setDefaultPendingMs(e.target.valueAsNumber)}
219-
className="w-full"
220-
/>
221-
</div>
222-
<div className={`${!defaultPendingMs ? 'opacity-30' : ''}`}>
223-
<div>Default Min Pending Ms: {defaultPendingMinMs}ms</div>
224-
<div>
225-
<input
226-
type="range"
227-
min="0"
228-
max="5000"
229-
step="100"
230-
value={defaultPendingMinMs}
231-
onChange={(e) => setDefaulPendingMinMs(e.target.valueAsNumber)}
232-
className={`w-full`}
233-
/>
234-
</div>
235-
</div>
200+
236201
<div>Action Delay: {actionDelay}ms</div>
237202
<div>
238203
<input
@@ -288,17 +253,11 @@ function App() {
288253
defaultPreload="intent"
289254
defaultLoaderMaxAge={defaultLoaderMaxAge}
290255
defaultPreloadMaxAge={defaultPreloadMaxAge}
291-
defaultPendingMs={defaultPendingMs}
292-
defaultPendingMinMs={defaultPendingMinMs}
293256
// defaultLoaderMaxAge={5 * 1000}
294257
// defaultLoaderGcMaxAge={10 * 1000}
295258
// Normally, the options above aren't changing, but for this particular
296259
// example, we need to key the router when they change
297-
key={[
298-
defaultPreloadMaxAge,
299-
defaultPendingMs,
300-
defaultPendingMinMs,
301-
].join('.')}
260+
key={[defaultPreloadMaxAge].join('.')}
302261
>
303262
<Root />
304263
</RouterProvider>
@@ -398,9 +357,7 @@ function Home() {
398357
elements are ready.
399358
<hr className={`my-2`} />
400359
To exaggerate async effects, play with the artificial request delay
401-
slider in the bottom-left corner. You can also play with the default
402-
timings for displaying the pending fallbacks and the minimum time any
403-
pending fallbacks will remain shown.
360+
slider in the bottom-left corner.
404361
<hr className={`my-2`} />
405362
The last 2 sliders determine if link-hover preloading is enabled (and
406363
how long those preloads stick around) and also whether to cache rendered

‎examples/react/with-trpc/client/main.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ function App() {
8686
in <Root /> before rendering any routes */}
8787
<RouterProvider
8888
router={router}
89-
defaultPendingElement={
89+
defaultPendingComponent={
9090
<div className={`p-2 text-2xl`}>
9191
<Spinner />
9292
</div>
@@ -178,9 +178,7 @@ function Home() {
178178
elements are ready.
179179
<hr className={`my-2`} />
180180
To exaggerate async effects, play with the artificial request delay
181-
slider in the bottom-left corner. You can also play with the default
182-
timings for displaying the pending fallbacks and the minimum time any
183-
pending fallbacks will remain shown.
181+
slider in the bottom-left corner.
184182
<hr className={`my-2`} />
185183
The last 2 sliders determine if link-hover preloading is enabled (and
186184
how long those preloads stick around) and also whether to cache rendered

‎packages/react-router/src/index.tsx

+10-24
Original file line numberDiff line numberDiff line change
@@ -492,37 +492,23 @@ export function Outlet() {
492492
{
493493
((): React.ReactNode => {
494494
if (match.status === 'error') {
495-
if (errorComponent) {
496-
return React.createElement(errorComponent as any)
497-
}
498-
499-
// if (
500-
// match.options.useErrorBoundary ||
501-
// router.options.useErrorBoundary
502-
// ) {
503495
throw match.error
504-
// }
505496
}
506497

507-
if (match.status !== 'success' && match.__.loadPromise) {
498+
if (match.status === 'success') {
499+
return React.createElement(
500+
(match.__.component as any) ??
501+
router.options.defaultComponent ??
502+
Outlet,
503+
)
504+
}
505+
506+
if (match.__.loadPromise) {
508507
console.log(match.matchId, 'suspend')
509508
throw match.__.loadPromise
510-
511-
// if (match.isPending) {
512-
513-
// if (match.options.pendingMs || pendingComponent) {
514-
// return React.createElement(pendingComponent as any) ?? null
515-
// }
516-
// }
517509
}
518510

519-
console.log(match.matchId, match.status)
520-
521-
return React.createElement(
522-
(match.__.component as any) ??
523-
router.options.defaultComponent ??
524-
Outlet,
525-
)
511+
invariant(false, 'This should never happen!')
526512
})() as JSX.Element
527513
}
528514
</CatchBoundary>

‎packages/router-core/src/routeConfig.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -108,15 +108,11 @@ export type RouteOptions<
108108
// Filter functions that can manipulate search params *after* they are passed to links and navigate
109109
// calls that match this route.
110110
postSearchFilters?: SearchFilter<TFullSearchSchema>[]
111-
// The duration to wait during `loader` execution before showing the `pendingComponent`
112-
pendingMs?: number
113-
// _If the `pendingComponent` is shown_, the minimum duration for which it will be visible.
114-
pendingMinMs?: number
115111
// The content to be rendered when the route is matched. If no component is provided, defaults to `<Outlet />`
116112
component?: GetFrameworkGeneric<'Component'> // , NoInfer<TLoaderData>>
117113
// The content to be rendered when the route encounters an error
118114
errorComponent?: GetFrameworkGeneric<'Component'> // , NoInfer<TLoaderData>>
119-
// The content to be rendered when the duration of `loader` execution surpasses the `pendingMs` duration
115+
// If supported by your framework, the content to be rendered as the fallback content until the route is ready to render
120116
pendingComponent?: GetFrameworkGeneric<'Component'> //, NoInfer<TLoaderData>>
121117
// An asynchronous function responsible for preparing or fetching data for the route before it is rendered
122118
loader?: LoaderFn<TRouteLoaderData, TFullSearchSchema, TAllParams>

0 commit comments

Comments
 (0)