rustyjux commented 3 months ago

API Services Portal Issue

User Story

As a API provider on the Portal,
I want page elements to consistently load quickly AND use appropriately sized skeletons during loading
so that I don't need to wait or end up clicking the wrong element when the page jumps.

Slow loads include:

Gateway display names in the My Gateways list
Gateway details

It's possible the slower loads are limited to dev/test, but regardless, appropriately sized skeletons would improve UX when page loads.

Test Case

ENV

[X] DEV
[X] TEST
[ ] PROD

TESTCASE

Open the page (/list or /details)

EXPECTED

First: Skeletons are sized to fill the loading page elements. Page does not shift when elements load.
Secondary: Loading all page elements takes less than X seconds (1 s? 0.5 s?)

ACTUAL

Loading display names (on /list) or the current Gateway details in header (on /details) often has a noticeable delay
Page jumps when these elements load and fill space

timng-bcgov commented 3 months ago

I couldn't find the logic for the skeletons in the codebase. Would you like to discuss what the skeletons should look like? I can make some quick mockups if it would be helpful.

rustyjux commented 3 months ago

<Skeleton> is used throughout the Portal for loading elements and can be seen e.g. on the /detail page: In that case, it just needs resizing in the props. It comes straight from Chakra - https://v1.chakra-ui.com/docs/components/feedback/skeleton

timng-bcgov commented 3 months ago

Thanks, with regard to sizing and to avoid layout shift, I was thinking of using separate Skeletons. Something like this:

Elson9 commented 1 month ago

Priority: improving UX for our services

bcgov / api-services-portal

Namespace to Gateway - Gateways list and details are slow to load elements #1140