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

[rustyjux]

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]

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]

<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]

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