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
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 observer = useRef<IntersectionObserver>()
@ -95,7 +95,7 @@ export default function TokenTable() {
/* loading and error state */
if (loading && (!tokens || tokens?.length === 0)) {
return <LoadingTokenTable rowCount={PAGE_SIZE} />
return <LoadingTokenTable rowCount={loadingRowCount} />
} else {
if (error || !tokens) {
return (
@ -126,7 +126,7 @@ export default function TokenTable() {
<LoadedRow
key={token?.address}
tokenListIndex={index}
tokenListLength={maxFetchable}
tokenListLength={tokens.length}
token={token}
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]
function useSortedTokens(tokens: TopTokens100Query['response']['topTokens']) {
function useSortedTokens(tokens: TopTokens100Query['response']['topTokens'] | undefined) {
const sortMethod = useAtomValue(sortMethodAtom)
const sortAscending = useAtomValue(sortAscendingAtom)
@ -167,7 +167,7 @@ interface UseTopTokensReturnValue {
tokens: TopToken[] | undefined
hasMore: boolean
loadMoreTokens: () => void
maxFetchable: number
loadingRowCount: number
}
export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
const duration = toHistoryDuration(useAtomValue(filterTimeAtom))
@ -176,11 +176,14 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
const [tokens, setTokens] = useState<TopToken[]>()
const [page, setPage] = useState(0)
const [error, setError] = useState<Error | undefined>()
const [prefetchedData, setPrefetchedData] = useState<PrefetchedTopToken[]>([])
const [prefetchedData, setPrefetchedData] = useState<PrefetchedTopToken[]>()
const prefetchedSelectedTokensWithoutPriceHistory = useFilteredTokens(useSortedTokens(prefetchedData))
const maxFetchable = useMemo(
() => prefetchedSelectedTokensWithoutPriceHistory.length,
[prefetchedSelectedTokensWithoutPriceHistory]
const loading = Boolean(loadingTokensWithPriceHistory || loadingTokensWithoutPriceHistory)
// loadingRowCount defaults to PAGE_SIZE when no prefetchedData is available yet because the initial load
// 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
@ -276,11 +279,11 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
return {
error,
loading: loadingTokensWithPriceHistory || loadingTokensWithoutPriceHistory,
loading,
tokens,
hasMore,
loadMoreTokens,
maxFetchable,
loadingRowCount,
}
}