Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: [M3-7195] - Marketplace OCA loading pattern POC #9724

Closed
wants to merge 7 commits into from

Conversation

abailly-akamai
Copy link
Contributor

@abailly-akamai abailly-akamai commented Sep 27, 2023

Description 📝

As a follow up to #9704, I noticed a few issues and room for improving the visual loading pattern (long query, prefetching issue, multiple circular loaders).

Apart from the prefetching issue, this PR offers improvements as a proof of concept to visually help the user while the page is loading. Those changes will be submitted to UX as well for approval.

Major Changes 🔄

  • Fixes the prefetching pattern from the navbar (was fetching twice: once from menu entry hover prefetch, twice when navigating to the page). There should be only one request.
  • Adds a clearable field to the App Search textfield. Small improvement but mirror the Category selection next to it and makes it easier to get the full list back
  • Replace the second circular loading pattern with our skeleton loader (App grid). Two circular loaders is not very friendly and seems to indicate something is wrong. Using the skeletons helps pre-shaping the content while announcing categories early (previously obfuscated by the loader)
  • Adds a "fake" loading percentage to the search bar. This is more the POC part. The code is commented but the gist of it is to provide an indication to the user this request will take longer (it is an anomaly within CM). While not being based on a true API roundtrip, I believe it to be helpful and potentially relieve some frustration waiting for the request to complete. All in all it is an inoffensive distraction pattern. The value of the counter is based on an average API response time. Note: whatever we do with it the util could be useful for other purposes.

Preview 📷

Before After
Screenshot 2023-09-27 at 16 03 55 Screenshot 2023-09-27 at 16 06 08

How to test 🧪

Requisites: pull code locally

Refetching fix

  1. While you network console is open (and use a XHR "strackscript" filter), navigate to /linodes - should notice no request
  2. Hover "Marketplace" - notice one request
  3. Click on "Marketplace" - notice no new request
  4. Reload Marketplace page - notice one request
  5. Navigate through site and come back to Marketplace - no new request and data should be loaded immediately
  6. You can also verify other scenari: hover over item for 4s then click, request should take about half time when landing on the marketplace page

Compare this behaviours with production and confirm fix + no regression

Visual fixes

  1. Use search and confirm filtering and clearing filtering
  2. Assert percentage count is not too far off (it may be if on a very slow connection)
  3. Confirm experience is isn't degraded, if not bettered by these changes

@abailly-akamai abailly-akamai self-assigned this Sep 27, 2023
@abailly-akamai abailly-akamai changed the title Feat: [M3-7195] Feat: [M3-7195] - Marketplace OCA loading pattern POC Sep 27, 2023
@@ -11,7 +11,7 @@ export const queryKey = 'stackscripts';

export const useStackScriptsOCA = (enabled: boolean, params: Params = {}) => {
return useQuery<StackScript[], APIError[]>(
[`${queryKey}-oca-all`, params],
`${queryKey}-oca-all`,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the fix for the prefetching request being invalidated. on page visit. CC @bnussman

maxWidth: 'none',
},
flexGrow: 10,
});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactored the markup a little bit and no need for styled components for a couple css rules.

@abailly-akamai abailly-akamai marked this pull request as ready for review September 27, 2023 20:43
@abailly-akamai abailly-akamai requested a review from a team as a code owner September 27, 2023 20:43
@abailly-akamai abailly-akamai requested review from dwiley-akamai and coliu-akamai and removed request for a team September 27, 2023 20:43
@abailly-akamai
Copy link
Contributor Author

Closing for now - may reuse some of this to combine with #9732

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant