this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

all suspence all the ttime

+145 -175
+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
··· 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 &quot;{nameFilter}&quot; 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 &quot;{nameFilter}&quot; 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
··· 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 &quot;{nameFilter}&quot; 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 &quot;{nameFilter}&quot; 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
··· 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
··· 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
··· 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 - }