feat: add pagination for cell list on transaction page

[Keith-CY]

This PR enables cell pagination on the Transaction page

Ref: Magickbase/ckb-explorer-public-issues#484
Preview: https://ckb-explorer-frontend-in-magickbase-repo-git-10bf71-magickbase.vercel.app/transaction/0xc0d63615267e6a30d871b6d35551619641ba699138c1337470f4cdb7f8b91f1b?page_of_inputs=1

---

Note that page size selector is hidden when the width is in the scope of [0, 600px] and [750px, 900px] because the layout should be adjusted in the future.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ckb-explorer-frontend-in-magickbase-repo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 29, 2024 5:33am

[Keith-CY]

Two messages to @Sven-TBD

1. This layout on mobile seems weird, how about keep it simple on mobile by removing the page size selector
   https://www.figma.com/file/6XNoimRDbFTTNm016rbIdU?node-id=28876:27837&mode=design#674182532
2. I found the page size component exists in input list and output list, so their sizes are independent, am I right?
   feat: use pagination in transaction inputs/outputs list #188 (comment)

[Sven-TBD]

Two messages to @Sven-TBD

1. This layout on mobile seems weird, how about keep it simple on mobile by removing the page size selector
   https://www.figma.com/file/6XNoimRDbFTTNm016rbIdU?node-id=28876:27837&mode=design#674182532
2. I found the page size component exists in input list and output list, so their sizes are independent, am I right?
   feat: use pagination in transaction inputs/outputs list #188 (comment)

1. I prefer to use page selector and made the page size selector an icon like changing the gap in kindle. （我们可以像调整Kindle中电子书间距一样调整Input/output展示数量）
2. Yes, it is. But we can merge them as one to make the whole page simpler.

[Keith-CY]

1. I prefer to use page selector and made the page size selector an icon like changing the gap in kindle. （我们可以像调整Kindle中电子书间距一样调整Input/output展示数量）

Could you post an image to illustrate how it should be? Cuz I haven't used kindle for a while.

2. Yes, it is. But we can merge them as one to make the whole page simpler.

My question is a bit confusing, I was trying to confirm if the count of the input list should be the same of the output list.

Say, when I set the count of the input list to 20, will the output list be changed from 10 to 20 simultaneously or still be 10?

[Sven-TBD]

1. I prefer to use page selector and made the page size selector an icon like changing the gap in kindle. （我们可以像调整Kindle中电子书间距一样调整Input/output展示数量）

Could you post an image to illustrate how it should be? Cuz I haven't used kindle for a while.

2. Yes, it is. But we can merge them as one to make the whole page simpler.

My question is a bit confusing, I was trying to confirm if the count of the input list should be the same of the output list.

Say, when I set the count of the input list to 20, will the output list be changed from 10 to 20 simultaneously or still be 10?

It's better if both of them change simultaneously. because the main reason of adjusting the length of these lists is that users want a better view experience, so it's unneccessary to adjust asynchronously. but in current design, it is separative , so I'm doing the new prototype, I think the new one will update soon.

[Keith-CY]

1. I prefer to use page selector and made the page size selector an icon like changing the gap in kindle. （我们可以像调整Kindle中电子书间距一样调整Input/output展示数量）

Could you post an image to illustrate how it should be? Cuz I haven't used kindle for a while.

2. Yes, it is. But we can merge them as one to make the whole page simpler.

My question is a bit confusing, I was trying to confirm if the count of the input list should be the same of the output list.
Say, when I set the count of the input list to 20, will the output list be changed from 10 to 20 simultaneously or still be 10?

It's better if both of them change simultaneously. because the main reason of adjusting the length of these lists is that users want a better view experience, so it's unneccessary to adjust asynchronously. but in current design, it is separative , so I'm doing the new prototype, I think the new one will update soon.

It may be over-considered to update the PRD because it's just a detail I want to confirm. Now I know that these two page sizes are not independent, they are interconnected and will be updated simultaneously when one of them is set.

[FrederLu]

https://ckb-explorer-frontend-in-magickbase-repo-1dml98b50-magickbase.vercel.app/transaction/0x1d320432dbe19599eb752d835be9877a596870b46980dd68edad3abd1fd10111

2024-01-23.14.32.55.mov

1、After switching to the last paging data, adjusting Show Rows to be larger than the current paging data boundary will not display the data.

---

2、The options that appear when modifying Show Rows on the output are blocked. Of course, you can manually slide the page upward at this time, but it is not very user-friendly.

[Keith-CY]

ckb-explorer-frontend-in-magickbase-repo-1dml98b50-magickbase.vercel.app/transaction/0x1d320432dbe19599eb752d835be9877a596870b46980dd68edad3abd1fd10111

2024-01-23.14.32.55.mov
1、After switching to the last paging data, adjusting Show Rows to be larger than the current paging data boundary will not display the data.

2、The options that appear when modifying Show Rows on the output are blocked. Of course, you can manually slide the page upward at this time, but it is not very user-friendly.

The

ckb-explorer-frontend-in-magickbase-repo-1dml98b50-magickbase.vercel.app/transaction/0x1d320432dbe19599eb752d835be9877a596870b46980dd68edad3abd1fd10111

2024-01-23.14.32.55.mov
1、After switching to the last paging data, adjusting Show Rows to be larger than the current paging data boundary will not display the data.

2、The options that appear when modifying Show Rows on the output are blocked. Of course, you can manually slide the page upward at this time, but it is not very user-friendly.

The requested range overflows in case 1, say there are 14 items, set page size 15, and visit the page 2, there should be no data displayed because the index on page 2 starts from 15.

There are generally 2 solutions:

1. show no data with the actual page number
2. redirect users to the last page
   Which one is better @Sven-TBD

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

[Sven-TBD]

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

I prefer case 2 @Keith-CY @FrederLu

[Keith-CY]

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

I prefer case 2 @Keith-CY @FrederLu

I will update it today

[FrederLu]

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

I prefer case 2 @Keith-CY @FrederLu

ok，I will create a new issue to track this issue.

The requested range overflows in case 1, say there are 14 items, set page size 15, and visit the page 2, there should be no data displayed because the index on page 2 starts from 15.

There are generally 2 solutions:

1.show no data with the actual page number
2.redirect users to the last page
Which one is better @Sven-TBD

What about this part? @Sven-TBD

[FrederLu]

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

This problem will be fixed in #533.

[Keith-CY]

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

This problem will be fixed in #533.

Overflow of page number should be fixed by e57e75d, it redirects to the last page when target page > max page

[FrederLu]

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

This problem will be fixed in #533.

Overflow of page number should be fixed by e57e75d, it redirects to the last page when target page > max page

https://ckb-explorer-frontend-in-magickbase-repo-orhdndh8o-magickbase.vercel.app/transaction/0x1a196ae531e25eee535fd0626bb1ff862c45de099a2866c927ba0f2df6d42ca6

2024-01-24.17.35.50.mov

Similar problems arise when using cross-reference between input and output.

[Keith-CY]

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

This problem will be fixed in #533.

Overflow of page number should be fixed by e57e75d, it redirects to the last page when target page > max page

ckb-explorer-frontend-in-magickbase-repo-orhdndh8o-magickbase.vercel.app/transaction/0x1a196ae531e25eee535fd0626bb1ff862c45de099a2866c927ba0f2df6d42ca6

2024-01-24.17.35.50.mov
Similar problems arise when using cross-reference between input and output.

I think it's a problem caused by same page size and page number for 2 list, when page x is the last page of list a, it may be outside list b, any idea from @Sven-TBD

BTW I found the total of each list is incorrect, and will fix it today

[Keith-CY]

For case 2, I would suggest opening a new issue to optimize the footer because fixing the dropdown doesn't help much, the footer will still cover others when it overlaps with other elements.

This problem will be fixed in #533.

Overflow of page number should be fixed by e57e75d, it redirects to the last page when target page > max page

ckb-explorer-frontend-in-magickbase-repo-orhdndh8o-magickbase.vercel.app/transaction/0x1a196ae531e25eee535fd0626bb1ff862c45de099a2866c927ba0f2df6d42ca6
2024-01-24.17.35.50.mov
Similar problems arise when using cross-reference between input and output.

I think it's a problem caused by same page size and page number for 2 list, when page x is the last page of list a, it may be outside list b, any idea from @Sven-TBD

BTW I found the total of each list is incorrect, and will fix it today

Please check if it's acceptable that one list is empty when the last page of the other list is visited. @Sven-TBD

[Sven-TBD]

If the size is adjusted, the list refreshes and everything is positioned on the first page. @Keith-CY

[Keith-CY]

Visiting page 1 when page size is updated: 1317b1d
cc @FrederLu

[Keith-CY]

Please have a review @Daryl-L @PainterPuppets @WhiteMinds