[5] Update Asset UX

[gibbsfromncis]

Based on feedback on this issue - #1757 I guess we should increase max items on the page.

[svk31]

I don't think that would help, you'd then have to scroll to see all items between clicking next page, making things worse.

[gibbsfromncis]

@svk31 agree. Could we reach an agreement on adding option to select how many items user want to see on the page?

[startailcoon]

Once all the assets are loaded, as they always has to be like @svk31 states, the user should be able to change the amount of rows placed on their screen.

I suggest we make it possible to change it between 20, 50, 70, 100, 200 per page.

Maybe this addition would be good for all pages using pagination in the future.

[froooze]

25, 50, 100 and 200 options makes more sense to me.

[gibbsfromncis]

@froooze @startailcoon I suppose 100 items is max because of API restrictions and I don't think it is fair to make some hacks to be able fetch more than 100 items.

[startailcoon]

The code fetches all items by API at once, you can tell the pagination to use any number I guess?

[gibbsfromncis]

@startailcoon exactly but If I remember correct the limit of items to fetch per one call is 100 to do not overload backend. If it's possible to fetch more than 100 I'll do it but if not I want to say there is no reason do put effort on ability to fetch more than 100 items per page

[sschiessl-bcp]

I suggest to add a "Show XX" combobox on the right side of

This combobox has 10 / 25 / 50 / 100 and All options, but also allows that the user enters a number by himself.

This needs evaluation / rating before claiming

[startailcoon]

I like the option of a few predefined options for the user to chose from, but letting them input one by their own design as well.

It will need testing to make sure the UX is looking good/working in different window sizes and browsers.

As there is no change in how the data is fetched from server based on the users choice I see no reason to evaluate any API load.

[gibbsfromncis]

@sschiessl-bcp @startailcoon

Agree. I've checked the code and it looks like it fetches all items before page load.

Task is:

• Add Select component to be able to manage amount of items on the page from the predefined list
• Add Number component to be able to manage amount of items on the page manually

During this task screenshots of realization should be provided to approve it looks nice.

Estimate is 2h

I suggest to add a "Show XX" combobox on the right side of

@sschiessl-bcp I'll check the ability to do it like you wish but I suggest it's not possible because pagination renders by ant and takes 100% of width. If there is no chance to make it as you wish I'll take UX from there (I'll put Select & Number components above the table)

[sschiessl-bcp]

I'd like to include one more thing if you are already touching it.

While the asset list is loading a loading indicator is shown over the whole page, disabling me to search or click on an asset (if e.g. the one I am looking for is already on first page).

I suggest to put the loading indicator in the top left of the screen (in your mockup in the same row as the Select component), which allows user interaction while loading. If user exits page while loading, loading should be stopped

[gibbsfromncis]

@sschiessl-bcp definitely agreed. Also it would be nice to make overlay over the table "white" or "dark" depending on theme. Because it makes me crazy when I'm trying to click and nothing happened because of transparent overlay...

Updated estimate: 3h

[startailcoon]

Would be very nice if you could make the loading asynchronous in the background and let the user interact with the list, filter and options during this time. The user should be notified that the list is still populating during this time though.

I think the pagination at the bottom and selection props at the top looks good.

• View options to 10 / 25 / 50 / 100 is good options
• Make sure it's theme independent
• If possible, try to make sure the list works well in a smaller frame, like a mobile unit.

[svk31]

It's already async, it's just the loading indicator that blocks input.

[sschiessl-bcp]

PR referenced wrong issue

[gibbsfromncis]

Done. (btw default 25 items on page, I made 10 to be able to make screenshot of entire page)

@startailcoon @wmbutler please increase estimate to 5h for the reason it took more time than I suggested.

[kristinlow]

Great improvement. Thanks everyone.