ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make number of loading rows make more sense when filtering, changing duration etc (#4781)

Browse Source 
* fix loading

* simplify

* respond to zach

* remove console log

* simplify and eliminate tokensListLength

* respond to nit
This commit is contained in:
lynn 2022-10-04 16:40:24 -04:00 committed by GitHub
parent 446eb9f9a4
commit 84364c9df2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Tokens/TokenTable/TokenTable.tsx
View File

@ -75,7 +75,7 @@ export default function TokenTable() {
// TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s // TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s
const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName) const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName)
const { error, loading, tokens, hasMore, loadMoreTokens, maxFetchable } = useTopTokens(chainName) const { error, loading, tokens, hasMore, loadMoreTokens, loadingRowCount } = useTopTokens(chainName)
const showMoreLoadingRows = Boolean(loading && hasMore) const showMoreLoadingRows = Boolean(loading && hasMore)
const observer = useRef<IntersectionObserver>() const observer = useRef<IntersectionObserver>()
@ -95,7 +95,7 @@ export default function TokenTable() {
/* loading and error state */ /* loading and error state */
if (loading && (!tokens || tokens?.length === 0)) { if (loading && (!tokens || tokens?.length === 0)) {
return <LoadingTokenTable rowCount={PAGE_SIZE} /> return <LoadingTokenTable rowCount={loadingRowCount} />
} else { } else {
if (error || !tokens) { if (error || !tokens) {
return ( return (
@ -126,7 +126,7 @@ export default function TokenTable() {
<LoadedRow <LoadedRow
key={token?.address} key={token?.address}
tokenListIndex={index} tokenListIndex={index}
tokenListLength={maxFetchable} tokenListLength={tokens.length}
token={token} token={token}
ref={index + 1 === tokens.length ? lastTokenRef : undefined} ref={index + 1 === tokens.length ? lastTokenRef : undefined}
/> />

19
src/graphql/data/TopTokens.ts
View File

@ -59,7 +59,7 @@ export enum TokenSortMethod {
export type PrefetchedTopToken = NonNullable<TopTokens100Query['response']['topTokens']>[number] export type PrefetchedTopToken = NonNullable<TopTokens100Query['response']['topTokens']>[number]
function useSortedTokens(tokens: TopTokens100Query['response']['topTokens']) { function useSortedTokens(tokens: TopTokens100Query['response']['topTokens'] | undefined) {
const sortMethod = useAtomValue(sortMethodAtom) const sortMethod = useAtomValue(sortMethodAtom)
const sortAscending = useAtomValue(sortAscendingAtom) const sortAscending = useAtomValue(sortAscendingAtom)
@ -167,7 +167,7 @@ interface UseTopTokensReturnValue {
tokens: TopToken[] | undefined tokens: TopToken[] | undefined
hasMore: boolean hasMore: boolean
loadMoreTokens: () => void loadMoreTokens: () => void
maxFetchable: number loadingRowCount: number
} }
export function useTopTokens(chain: Chain): UseTopTokensReturnValue { export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
const duration = toHistoryDuration(useAtomValue(filterTimeAtom)) const duration = toHistoryDuration(useAtomValue(filterTimeAtom))
@ -176,11 +176,14 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
const [tokens, setTokens] = useState<TopToken[]>() const [tokens, setTokens] = useState<TopToken[]>()
const [page, setPage] = useState(0) const [page, setPage] = useState(0)
const [error, setError] = useState<Error | undefined>() const [error, setError] = useState<Error | undefined>()
const [prefetchedData, setPrefetchedData] = useState<PrefetchedTopToken[]>([]) const [prefetchedData, setPrefetchedData] = useState<PrefetchedTopToken[]>()
const prefetchedSelectedTokensWithoutPriceHistory = useFilteredTokens(useSortedTokens(prefetchedData)) const prefetchedSelectedTokensWithoutPriceHistory = useFilteredTokens(useSortedTokens(prefetchedData))
const maxFetchable = useMemo( const loading = Boolean(loadingTokensWithPriceHistory || loadingTokensWithoutPriceHistory)
() => prefetchedSelectedTokensWithoutPriceHistory.length, // loadingRowCount defaults to PAGE_SIZE when no prefetchedData is available yet because the initial load
[prefetchedSelectedTokensWithoutPriceHistory] // count will always be PAGE_SIZE.
const loadingRowCount = useMemo(
() => (prefetchedData ? Math.min(prefetchedSelectedTokensWithoutPriceHistory.length, PAGE_SIZE) : PAGE_SIZE),
[prefetchedSelectedTokensWithoutPriceHistory, prefetchedData]
) )
const hasMore = !tokens || tokens.length < prefetchedSelectedTokensWithoutPriceHistory.length const hasMore = !tokens || tokens.length < prefetchedSelectedTokensWithoutPriceHistory.length
@ -276,11 +279,11 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
return { return {
error, error,
loading: loadingTokensWithPriceHistory || loadingTokensWithoutPriceHistory, loading,
tokens, tokens,
hasMore, hasMore,
loadMoreTokens, loadMoreTokens,
maxFetchable, loadingRowCount,
} }
} }