Description:
I noticed that when the marketplace is configured to show only one collection and you open a wallet page (pages/address/[address].tsx) to see which NFTs the person owns, the UserTokensGrid.tsx component first shows all NFTs and then filters to show only the NFTs from the configured collection. This happens quickly but the first unfiltered result is visible for a split second which I think should be avoided.
Suggestion:
As far as I understand, the UseUserTokens hook from reservoir0x/reservoir-kit-ui returns an object that is saved as userTokens in UserTokensGrid.tsx with the method mutate(). Initially userTokens includes all tokens, and then in an useEffect hook mutate() is called to filter the results, which creates a new userTokens object that only includes NFTs from the configured collection.
I suggest to use a state to check whether the mutate function was already called and only show the results after that. Maybe there is a cleaner solution though. I will open a PR to address this issue.
Description: I noticed that when the marketplace is configured to show only one collection and you open a wallet page (
pages/address/[address].tsx) to see which NFTs the person owns, theUserTokensGrid.tsxcomponent first shows all NFTs and then filters to show only the NFTs from the configured collection. This happens quickly but the first unfiltered result is visible for a split second which I think should be avoided.Suggestion: As far as I understand, the
UseUserTokenshook fromreservoir0x/reservoir-kit-uireturns an object that is saved asuserTokensinUserTokensGrid.tsxwith the methodmutate(). InitiallyuserTokensincludes all tokens, and then in an useEffect hookmutate()is called to filter the results, which creates a newuserTokensobject that only includes NFTs from the configured collection.I suggest to use a state to check whether the mutate function was already called and only show the results after that. Maybe there is a cleaner solution though. I will open a PR to address this issue.
For reference
https://user-images.githubusercontent.com/70953497/199428697-2847700e-d4b6-4179-b172-cf7a65d8a6d2.mov