UI - No network issue

[ghengeveld]

From AP-4366

How is the user affected? And what is the expected behavior?

When a user enables the addon, and for any reason the connection is lost at various stages of the process (e.g., auth, verify changes), he's left with a broken state with the following:

• Endless spinner for auth
• A blank page with the message "Loading" when trying to verify changes

Here's some recordings of the issue:

no-network-connection-message.mp4

auth-no-internet-connection.mp4

no-network-usage-loading-message.mp4

Based on a quick search of the Figma spec file, the design was implemented but never made it to current iteration for some reason. This is a simple fix that will improve the user experience and avoid confusion. This scenario is not rare and can happen and we should handle it gracefully.

Additionally, as we're in the stabilization phase, it would be in our best interest to ensure that the error messages we provide in the UI are clear and actionable. This will help users understand what's happening and what they can do to fix the issue as reported in #issue and also

How many and/or what class of users does this impact?

All

What are the steps for reproducing the issue?

For auth:

1. Setup a new Storybook project (or use an existing one)

2. Remove the Chromatic configuration file

3. Start Storybook

4. Disable the network connection

For changes verification:

Repeat the same steps as above but after enabling the addon and following the project link steps, disable the network connection.