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

#8287: Improve UX for long sidebar open times #8474

Merged

Conversation

grahamlangford
Copy link
Collaborator

@grahamlangford grahamlangford commented May 17, 2024

What does this PR do?

Reviewer Tips

Discussion

  • I've not been able to get the original timeout to throw on my machine, so this isn't tested beyond verifying it doesn't break typical open/close behavior
  • Tested with a mix of sleep and throwing errors

Checklist

@grahamlangford grahamlangford linked an issue May 17, 2024 that may be closed by this pull request
@grahamlangford grahamlangford self-assigned this May 17, 2024
} catch (error) {
throw new Error("The sidebar did not respond in time", { cause: error });
}
await pingSidebar();
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This try/catch was redundant

Copy link

codecov bot commented May 17, 2024

Codecov Report

Attention: Patch coverage is 14.28571% with 12 lines in your changes are missing coverage. Please review.

Project coverage is 73.42%. Comparing base (6d95047) to head (8d97195).
Report is 77 commits behind head on main.

Files Patch % Lines
src/contentScript/sidebarController.tsx 14.28% 12 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #8474      +/-   ##
==========================================
- Coverage   73.47%   73.42%   -0.05%     
==========================================
  Files        1334     1352      +18     
  Lines       41259    41572     +313     
  Branches     7686     7801     +115     
==========================================
+ Hits        30316    30526     +210     
- Misses      10943    11046     +103     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@twschiller
Copy link
Contributor

I've not been able to get the original timeout to throw on my machine, so this isn't tested beyond verifying it doesn't break typical open/close behavior

@grahamlangford you should be able to replicate it by setting a delay in the open sidebar method? (Or by setting a breakpoint in that method)

Copy link

No loom links were found in the first post. Please add one there if you'd like to it to appear on Slack.

Do not edit this comment manually.

{
retries: 3,
onFailedAttempt({ attemptNumber }) {
if (attemptNumber === 1) {
Copy link
Contributor

@twschiller twschiller May 17, 2024

Choose a reason for hiding this comment

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

@grahamlangford you need to save the handle so you can clear the message once the sidebar is open

  • FIXME: clear the sidebar loading toast once the sidebar load

Copy link
Contributor

Choose a reason for hiding this comment

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

I'd have the notification show indefinitely until either: 1) the sidebar loads, or 2) the load times out. Otherwise there can be a situation where the message disappears but the sidebar has not loaded yet

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Set it to 30 seconds, which should timeout well before. But I can alway set it to Number.POSITIVE_INFINITY for disabling auto-dismiss. That seems to be the way the library is intended to work

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Will dismiss on success or timeout

Copy link
Contributor

Choose a reason for hiding this comment

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

Set it to 30 seconds, which should timeout well before. But I can alway set it to Number.POSITIVE_INFINITY for disabling auto-dismiss. That seems to be the way the library is intended to work

I'd recommend turning off auto-dismiss

Will dismiss on success or timeout

Where is the logic for hiding on timeout? Don't you need to also hide here when the error message will be shown?: https://github.com/pixiebrix/pixiebrix-extension/pull/8474/files/9fb06597a57a6ebca77e1adac133cf9096f78aff..22a882006f7d91d0c6767bbbd306c631dd557a23#diff-401596be27525397ebb55206c26230337d2badc594398f9033a2e6e1ff4a9ee8R119

IIRC ping sidebar throws on a failed ping, so the logic to hide it won't run on the final failed retry?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Where is the logic for hiding on timeout?

I think you must be looking at an earlier commit, because I hide before I throw in the catch block:

} catch (error) {
// Hide the slow loading warning before showing the error
hideNotification(notificationId);
// TODO: Use TimeoutError after https://github.com/sindresorhus/p-timeout/issues/41
throw new Error(
"The Sidebar took too long to load. Retry your last action or reopen the Sidebar",
{ cause: error },
);
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'd recommend turning off auto-dismiss

I don't think that's possible other than setting the timeout to Number.POSITIVE_INFINITY. I wouldn't want to max out the timeout and make the toast not dismissible

@grahamlangford
Copy link
Collaborator Author

I've not been able to get the original timeout to throw on my machine, so this isn't tested beyond verifying it doesn't break typical open/close behavior

@grahamlangford you should be able to replicate it by setting a delay in the open sidebar method? (Or by setting a breakpoint in that method)

You know, that's blindingly obvious in retrospect. Doing that now

Copy link

github-actions bot commented May 17, 2024

Playwright test results - MV2

passed  43 passed
flaky  1 flaky
skipped  12 skipped

Details

report  Open report ↗︎
stats  56 tests across 19 suites
duration  12 minutes, 9 seconds
commit  8d97195

Flaky tests

chromeSetup › auth.setup.ts › authenticate

Skipped tests

chrome › tests/extensionConsoleActivation.spec.ts › can activate a mod with built-in integration
chrome › tests/extensionConsoleActivation.spec.ts › can activate a mod via url
edge › tests/extensionConsoleActivation.spec.ts › can activate a mod with built-in integration
edge › tests/extensionConsoleActivation.spec.ts › can activate a mod via url
chrome › tests/regressions/sidebarLinks.spec.ts › #8206: clicking links from the sidebar doesn't crash browser
edge › tests/regressions/sidebarLinks.spec.ts › #8206: clicking links from the sidebar doesn't crash browser
chrome › tests/runtime/sidebarController.spec.ts › sidebar controller › shows focus dialog in top-level frame
edge › tests/runtime/sidebarController.spec.ts › sidebar controller › shows focus dialog in top-level frame
chrome › tests/runtime/sidebarNavigation.spec.ts › sidebar mod panels are persistent during navigation
chrome › tests/runtime/sidebarNavigation.spec.ts › sidebar form and temporary panels are unavailable after navigation
edge › tests/runtime/sidebarNavigation.spec.ts › sidebar mod panels are persistent during navigation
edge › tests/runtime/sidebarNavigation.spec.ts › sidebar form and temporary panels are unavailable after navigation

Copy link

github-actions bot commented May 17, 2024

Playwright test results - MV3

passed  56 passed

Details

report  Open report ↗︎
stats  56 tests across 19 suites
duration  15 minutes, 58 seconds
commit  8d97195

@twschiller twschiller added this to the 2.0.0 milestone May 20, 2024
@twschiller twschiller added the user experience Improve the user experience (UX) label May 20, 2024
@grahamlangford grahamlangford merged commit 6a0de1b into main May 20, 2024
32 checks passed
@grahamlangford grahamlangford deleted the 8287-make-the-sidebar-open-timeout-experience-better branch May 20, 2024 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
user experience Improve the user experience (UX)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make the sidebar open timeout experience better
3 participants