fix: improved page loading shimmer items

[ignaciosantise]

Summary

• Adding loading items dynamically to wallet list

The issue:

The page loader needs to be dynamic to cover this cases:

The length of the wallet list is dynamic because:

• Items per row is dynamic based on screen width
• Preloaded wallets before opening "All wallets" view is also dynamic based on recommended, featured and installed wallets

So if i want to show a page loader at bottom, i need to fill the empty spaces in the row

The solution:

Calculate how many wallets i need to fill the gap, and add those items at the bottom of the list

Screenshots

https://github.com/WalletConnect/web3modal-react-native/assets/25931366/a68cbd2c-85b0-4e62-9f76-58e90207410a

https://github.com/WalletConnect/web3modal-react-native/assets/25931366/8098c05b-32d0-417d-824c-f0898ffa7cad

[quetool]

What I do roughly is:

1. Setting a fixed page length, say 48 wallets per page
2. No matter how many wallets I query before the first page (installed/featured) first page will have length of (48 - already fetched wallets count)
3. Second page and further will have always 48 length
4. When it comes to add the loading items I will just add them the amount based on the screen: 4, 5 or 8 depending on the screen width

[ignaciosantise]

What I do roughly is:

1. Setting a fixed page length, say 48 wallets per page
2. No matter how many wallets I query before the first page (installed/featured) first page will have length of (48 - already fetched wallets count)
3. Second page and further will have always 48 length
4. When it comes to add the loading items I will just add them the amount based on the screen: 4, 5 or 8 depending on the screen width

@quetool I tried that, but then realized i shouldn't change the page size between pages because in this case you'll loose some wallets in the way

[quetool]

What I do roughly is:

1. Setting a fixed page length, say 48 wallets per page
2. No matter how many wallets I query before the first page (installed/featured) first page will have length of (48 - already fetched wallets count)
3. Second page and further will have always 48 length
4. When it comes to add the loading items I will just add them the amount based on the screen: 4, 5 or 8 depending on the screen width

@quetool I tried that, but then realized i shouldn't change the page size between pages because in this case you'll loose some wallets in the way

We can talk about but I'm not loosing them, you can compare flutter example app with web one :)