this repo has no description
all suspence all the ttime
+145
-175
+3
-3
src/components/header.tsx
+3
-3
src/components/header.tsx
···
6
6
{ to: "/basic", label: "01_basic" },
7
7
{ to: "/preloading", label: "02_preloading" },
8
8
{ to: "/intent-preloading", label: "03_intent-preloading", preload: "intent" as const },
9
-
{ to: "/pagination", label: "04_pagination" },
10
-
{ to: "/filters", label: "05_filters" },
11
-
{ to: "/debounced-preload-filters", label: "06_debounced-filters" },
9
+
{ to: "/pagination", label: "04_pagination", preload: "intent" as const },
10
+
{ to: "/filters", label: "05_filters", preload: "intent" as const },
11
+
{ to: "/debounced-preload-filters", label: "06_debounced-filters", preload: "intent" as const },
12
12
];
13
13
14
14
export function Header() {
+36
-38
src/routes/debounced-preload-filters.tsx
+36
-38
src/routes/debounced-preload-filters.tsx
···
1
1
import { Suspense, useCallback, useState } from "react";
2
2
import { createFileRoute, useRouteContext } from "@tanstack/react-router";
3
3
import { useDebouncedCallback } from "@tanstack/react-pacer";
4
-
import { queryOptions, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
4
+
import { queryOptions, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
5
5
import * as v from "valibot";
6
6
import { QueryTrace } from "~/components/console/query-trace";
7
7
import {
···
147
147
)}
148
148
</h1>
149
149
150
-
<div className="min-h-[500px]">
151
-
<Suspense
152
-
fallback={
153
-
<>
150
+
<Suspense
151
+
fallback={
152
+
<>
153
+
<div className="min-h-125">
154
154
<QueryTrace
155
155
{...getDebouncedQueryTraceProps(currentOffset, nameFilter)}
156
156
cacheStatus={getLoadingCacheStatus()}
···
158
158
preloadStatus={getLoadingPreloadStatus()}
159
159
/>
160
160
<PokemonTableSkeleton rowCount={POKEMON_LIMIT} />
161
-
</>
162
-
}
163
-
>
164
-
<PokemonTableContent currentOffset={currentOffset} nameFilter={nameFilter} />
165
-
</Suspense>
166
-
</div>
167
-
<PaginationNavOutlet />
161
+
</div>
162
+
<PaginationNav
163
+
prevOffset={null}
164
+
nextOffset={null}
165
+
to="/debounced-preload-filters"
166
+
/>
167
+
</>
168
+
}
169
+
>
170
+
<PokemonTableContent currentOffset={currentOffset} nameFilter={nameFilter} />
171
+
</Suspense>
168
172
</ConsoleCard>
169
173
</div>
170
174
</main>
···
184
188
185
189
return (
186
190
<>
187
-
<QueryTrace
188
-
{...getDebouncedQueryTraceProps(currentOffset, nameFilter)}
189
-
cacheStatus={getCacheStatus(dataUpdatedAt)}
190
-
fetchStatus={getFetchStatus(fetchStatus, status)}
191
-
preloadStatus={getPreloadStatus(dataUpdatedAt)}
192
-
/>
193
-
<PokemonTable pokemon={filteredPokemon} />
191
+
<div className="min-h-125">
192
+
<QueryTrace
193
+
{...getDebouncedQueryTraceProps(currentOffset, nameFilter)}
194
+
cacheStatus={getCacheStatus(dataUpdatedAt)}
195
+
fetchStatus={getFetchStatus(fetchStatus, status)}
196
+
preloadStatus={getPreloadStatus(dataUpdatedAt)}
197
+
/>
198
+
<PokemonTable pokemon={filteredPokemon} />
194
199
195
-
{filteredPokemon.length === 0 && nameFilter && (
196
-
<div className="text-center py-4 text-(--text-muted) font-mono text-sm">
197
-
No Pokémon found matching "{nameFilter}"
198
-
</div>
199
-
)}
200
+
{filteredPokemon.length === 0 && nameFilter && (
201
+
<div className="text-center py-4 text-(--text-muted) font-mono text-sm">
202
+
No Pokémon found matching "{nameFilter}"
203
+
</div>
204
+
)}
205
+
</div>
206
+
<PaginationNav
207
+
prefetch="viewport"
208
+
prevOffset={data.prevOffset}
209
+
nextOffset={data.nextOffset}
210
+
to="/debounced-preload-filters"
211
+
/>
200
212
</>
201
213
);
202
214
}
203
-
204
-
function PaginationNavOutlet() {
205
-
const { pokemonListOptions } = useRouteContext({ from: "/debounced-preload-filters" });
206
-
const { data } = useQuery(pokemonListOptions);
207
-
208
-
return (
209
-
<PaginationNav
210
-
prefetch="viewport"
211
-
prevOffset={data?.prevOffset ?? null}
212
-
nextOffset={data?.nextOffset ?? null}
213
-
to="/debounced-preload-filters"
214
-
/>
215
-
);
216
-
}
+32
-38
src/routes/filters.tsx
+32
-38
src/routes/filters.tsx
···
1
1
import { Suspense, useCallback, useState } from "react";
2
2
import { createFileRoute, useRouteContext } from "@tanstack/react-router";
3
-
import { queryOptions, useQuery, useSuspenseQuery } from "@tanstack/react-query";
3
+
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
4
4
import * as v from "valibot";
5
5
import { QueryTrace } from "~/components/console/query-trace";
6
6
import {
···
114
114
)}
115
115
</h1>
116
116
117
-
<div className="min-h-[500px]">
118
-
<Suspense
119
-
fallback={
120
-
<>
117
+
<Suspense
118
+
fallback={
119
+
<>
120
+
<div className="min-h-125">
121
121
<QueryTrace
122
122
{...getFiltersQueryTraceProps(currentOffset, nameFilter)}
123
123
cacheStatus={getLoadingCacheStatus()}
···
125
125
preloadStatus={getLoadingPreloadStatus()}
126
126
/>
127
127
<PokemonTableSkeleton rowCount={POKEMON_LIMIT} />
128
-
</>
129
-
}
130
-
>
131
-
<PokemonTableContent currentOffset={currentOffset} nameFilter={nameFilter} />
132
-
</Suspense>
133
-
</div>
134
-
<PaginationNavOutlet />
128
+
</div>
129
+
<PaginationNav prevOffset={null} nextOffset={null} to="/filters" />
130
+
</>
131
+
}
132
+
>
133
+
<PokemonTableContent currentOffset={currentOffset} nameFilter={nameFilter} />
134
+
</Suspense>
135
135
</ConsoleCard>
136
136
</div>
137
137
</main>
···
151
151
152
152
return (
153
153
<>
154
-
<QueryTrace
155
-
{...getFiltersQueryTraceProps(currentOffset, nameFilter)}
156
-
cacheStatus={getCacheStatus(dataUpdatedAt)}
157
-
fetchStatus={getFetchStatus(fetchStatus, status)}
158
-
preloadStatus={getPreloadStatus(dataUpdatedAt)}
159
-
/>
160
-
<PokemonTable pokemon={filteredPokemon} />
154
+
<div className="min-h-125">
155
+
<QueryTrace
156
+
{...getFiltersQueryTraceProps(currentOffset, nameFilter)}
157
+
cacheStatus={getCacheStatus(dataUpdatedAt)}
158
+
fetchStatus={getFetchStatus(fetchStatus, status)}
159
+
preloadStatus={getPreloadStatus(dataUpdatedAt)}
160
+
/>
161
+
<PokemonTable pokemon={filteredPokemon} />
161
162
162
-
{filteredPokemon.length === 0 && nameFilter && (
163
-
<div className="text-center py-4 text-(--text-muted) font-mono text-sm">
164
-
No Pokémon found matching "{nameFilter}"
165
-
</div>
166
-
)}
163
+
{filteredPokemon.length === 0 && nameFilter && (
164
+
<div className="text-center py-4 text-(--text-muted) font-mono text-sm">
165
+
No Pokémon found matching "{nameFilter}"
166
+
</div>
167
+
)}
168
+
</div>
169
+
<PaginationNav
170
+
prefetch="viewport"
171
+
prevOffset={data.prevOffset}
172
+
nextOffset={data.nextOffset}
173
+
to="/filters"
174
+
/>
167
175
</>
168
176
);
169
177
}
170
-
171
-
function PaginationNavOutlet() {
172
-
const { pokemonListOptions } = useRouteContext({ from: "/filters" });
173
-
const { data } = useQuery(pokemonListOptions);
174
-
175
-
return (
176
-
<PaginationNav
177
-
prefetch="viewport"
178
-
prevOffset={data?.prevOffset ?? null}
179
-
nextOffset={data?.nextOffset ?? null}
180
-
to="/filters"
181
-
/>
182
-
);
183
-
}
+26
-32
src/routes/intent-preloading.tsx
+26
-32
src/routes/intent-preloading.tsx
···
1
1
import { Suspense } from "react";
2
2
import { createFileRoute, useRouteContext } from "@tanstack/react-router";
3
-
import { queryOptions, useQuery, useSuspenseQuery } from "@tanstack/react-query";
3
+
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
4
4
import * as v from "valibot";
5
5
import { QueryTrace } from "~/components/console/query-trace";
6
6
import {
···
68
68
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
69
69
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
70
70
</h1>
71
-
<div className="min-h-[500px]">
72
-
<Suspense
73
-
fallback={
74
-
<>
71
+
<Suspense
72
+
fallback={
73
+
<>
74
+
<div className="min-h-125">
75
75
<QueryTrace
76
76
{...getIntentPreloadingQueryTraceProps(currentOffset)}
77
77
cacheStatus={getLoadingCacheStatus()}
···
79
79
preloadStatus={getLoadingPreloadStatus()}
80
80
/>
81
81
<PokemonTableSkeleton rowCount={POKEMON_LIMIT} />
82
-
</>
83
-
}
84
-
>
85
-
<PokemonTableContent currentOffset={currentOffset} />
86
-
</Suspense>
87
-
</div>
88
-
<PaginationNavOutlet />
82
+
</div>
83
+
<PaginationNav prevOffset={null} nextOffset={null} to="/intent-preloading" />
84
+
</>
85
+
}
86
+
>
87
+
<PokemonTableContent currentOffset={currentOffset} />
88
+
</Suspense>
89
89
</ConsoleCard>
90
90
</div>
91
91
</main>
···
98
98
99
99
return (
100
100
<>
101
-
<QueryTrace
102
-
{...getIntentPreloadingQueryTraceProps(currentOffset)}
103
-
cacheStatus={getCacheStatus(dataUpdatedAt)}
104
-
fetchStatus={getFetchStatus(fetchStatus, status)}
105
-
preloadStatus={getPreloadStatus(dataUpdatedAt)}
101
+
<div className="min-h-125">
102
+
<QueryTrace
103
+
{...getIntentPreloadingQueryTraceProps(currentOffset)}
104
+
cacheStatus={getCacheStatus(dataUpdatedAt)}
105
+
fetchStatus={getFetchStatus(fetchStatus, status)}
106
+
preloadStatus={getPreloadStatus(dataUpdatedAt)}
107
+
/>
108
+
<PokemonTable pokemon={data.pokemon} />
109
+
</div>
110
+
<PaginationNav
111
+
prefetch="intent"
112
+
prevOffset={data.prevOffset}
113
+
nextOffset={data.nextOffset}
114
+
to="/intent-preloading"
106
115
/>
107
-
<PokemonTable pokemon={data.pokemon} />
108
116
</>
109
117
);
110
118
}
111
-
112
-
function PaginationNavOutlet() {
113
-
const { pokemonListOptions } = useRouteContext({ from: "/intent-preloading" });
114
-
const { data } = useQuery(pokemonListOptions);
115
-
116
-
return (
117
-
<PaginationNav
118
-
prefetch="intent"
119
-
prevOffset={data?.prevOffset ?? null}
120
-
nextOffset={data?.nextOffset ?? null}
121
-
to="/intent-preloading"
122
-
/>
123
-
);
124
-
}
+26
-32
src/routes/pagination.tsx
+26
-32
src/routes/pagination.tsx
···
1
1
import { Suspense } from "react";
2
2
import { createFileRoute, useRouteContext } from "@tanstack/react-router";
3
-
import { queryOptions, useQuery, useSuspenseQuery } from "@tanstack/react-query";
3
+
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
4
4
import * as v from "valibot";
5
5
import { QueryTrace } from "~/components/console/query-trace";
6
6
import {
···
76
76
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
77
77
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
78
78
</h1>
79
-
<div className="min-h-[500px]">
80
-
<Suspense
81
-
fallback={
82
-
<>
79
+
<Suspense
80
+
fallback={
81
+
<>
82
+
<div className="min-h-125">
83
83
<QueryTrace
84
84
{...getPaginationQueryTraceProps(currentOffset)}
85
85
cacheStatus={getLoadingCacheStatus()}
···
87
87
preloadStatus={getLoadingPreloadStatus()}
88
88
/>
89
89
<PokemonTableSkeleton rowCount={POKEMON_LIMIT} />
90
-
</>
91
-
}
92
-
>
93
-
<PokemonTableContent currentOffset={currentOffset} />
94
-
</Suspense>
95
-
</div>
96
-
<PaginationNavOutlet />
90
+
</div>
91
+
<PaginationNav prevOffset={null} nextOffset={null} to="/pagination" />
92
+
</>
93
+
}
94
+
>
95
+
<PokemonTableContent currentOffset={currentOffset} />
96
+
</Suspense>
97
97
</ConsoleCard>
98
98
</div>
99
99
</main>
···
106
106
107
107
return (
108
108
<>
109
-
<QueryTrace
110
-
{...getPaginationQueryTraceProps(currentOffset)}
111
-
cacheStatus={getCacheStatus(dataUpdatedAt)}
112
-
fetchStatus={getFetchStatus(fetchStatus, status)}
113
-
preloadStatus={getPreloadStatus(dataUpdatedAt)}
109
+
<div className="min-h-125">
110
+
<QueryTrace
111
+
{...getPaginationQueryTraceProps(currentOffset)}
112
+
cacheStatus={getCacheStatus(dataUpdatedAt)}
113
+
fetchStatus={getFetchStatus(fetchStatus, status)}
114
+
preloadStatus={getPreloadStatus(dataUpdatedAt)}
115
+
/>
116
+
<PokemonTable pokemon={data.pokemon} />
117
+
</div>
118
+
<PaginationNav
119
+
prefetch="viewport"
120
+
prevOffset={data.prevOffset}
121
+
nextOffset={data.nextOffset}
122
+
to="/pagination"
114
123
/>
115
-
<PokemonTable pokemon={data.pokemon} />
116
124
</>
117
125
);
118
126
}
119
-
120
-
function PaginationNavOutlet() {
121
-
const { pokemonListOptions } = useRouteContext({ from: "/pagination" });
122
-
const { data } = useQuery(pokemonListOptions);
123
-
124
-
return (
125
-
<PaginationNav
126
-
prefetch="viewport"
127
-
prevOffset={data?.prevOffset ?? null}
128
-
nextOffset={data?.nextOffset ?? null}
129
-
to="/pagination"
130
-
/>
131
-
);
132
-
}
+22
-32
src/routes/preloading.tsx
+22
-32
src/routes/preloading.tsx
···
1
1
import { Suspense } from "react";
2
2
import { createFileRoute, useRouteContext } from "@tanstack/react-router";
3
-
import { queryOptions, useQuery, useSuspenseQuery } from "@tanstack/react-query";
3
+
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
4
4
import * as v from "valibot";
5
5
import { QueryTrace } from "~/components/console/query-trace";
6
6
import {
···
68
68
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
69
69
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
70
70
</h1>
71
-
<div className="min-h-[500px]">
72
-
<Suspense
73
-
fallback={
74
-
<>
71
+
<Suspense
72
+
fallback={
73
+
<>
74
+
<div className="min-h-125">
75
75
<QueryTrace
76
76
{...getPreloadingQueryTraceProps(currentOffset)}
77
77
cacheStatus={getLoadingCacheStatus()}
···
79
79
preloadStatus={getLoadingPreloadStatus()}
80
80
/>
81
81
<PokemonTableSkeleton rowCount={POKEMON_LIMIT} />
82
-
</>
83
-
}
84
-
>
85
-
<PokemonTableContent currentOffset={currentOffset} />
86
-
</Suspense>
87
-
</div>
88
-
<PaginationNavOutlet />
82
+
</div>
83
+
<PaginationNav prevOffset={null} nextOffset={null} to="/preloading" />
84
+
</>
85
+
}
86
+
>
87
+
<PokemonTableContent currentOffset={currentOffset} />
88
+
</Suspense>
89
89
</ConsoleCard>
90
90
</div>
91
91
</main>
···
98
98
99
99
return (
100
100
<>
101
-
<QueryTrace
102
-
{...getPreloadingQueryTraceProps(currentOffset)}
103
-
cacheStatus={getCacheStatus(dataUpdatedAt)}
104
-
fetchStatus={getFetchStatus(fetchStatus, status)}
105
-
preloadStatus={getPreloadStatus(dataUpdatedAt)}
106
-
/>
107
-
<PokemonTable pokemon={data.pokemon} />
101
+
<div className="min-h-125">
102
+
<QueryTrace
103
+
{...getPreloadingQueryTraceProps(currentOffset)}
104
+
cacheStatus={getCacheStatus(dataUpdatedAt)}
105
+
fetchStatus={getFetchStatus(fetchStatus, status)}
106
+
preloadStatus={getPreloadStatus(dataUpdatedAt)}
107
+
/>
108
+
<PokemonTable pokemon={data.pokemon} />
109
+
</div>
110
+
<PaginationNav prevOffset={data.prevOffset} nextOffset={data.nextOffset} to="/preloading" />
108
111
</>
109
112
);
110
113
}
111
-
112
-
function PaginationNavOutlet() {
113
-
const { pokemonListOptions } = useRouteContext({ from: "/preloading" });
114
-
const { data } = useQuery(pokemonListOptions);
115
-
116
-
return (
117
-
<PaginationNav
118
-
prevOffset={data?.prevOffset ?? null}
119
-
nextOffset={data?.nextOffset ?? null}
120
-
to="/preloading"
121
-
/>
122
-
);
123
-
}