Add a loading GIF or screen on first render of browserAction popup

[biancadanforth]

The browserAction scripts don’t run until its page exists, which doesn’t happen until the user clicks the browserAction icon to open the popup.

Once the popup is opened, before we can render the list of tracked products, we have to get the list from the extension’s local storage (via loadStateFromStorage). This is an async call that could be slow to return, say if the user has saved a lot of products and/or they have a slow internet connection.

Even after loadStateFromStorage returns, there is additional async work that needs to be done to make the loaded state available as props in our top level app component.

We therefore don’t want to wait for this async function and all of its follow-on async tasks to return before rendering at least something in the popup.

• @bryanbell What would you recommend we show in the popup here? This period of time will likely range from a fraction of a second to several seconds or more.
• @bryanbell to obtain loading animation graphic from Amy.

[biancadanforth]

Here are some guidelines from bryanbell:

• The minimum height of the popup should be equal to that of the empty list/onboarding popup.
  • The popup should never get shorter than that initial height; if it needs to get longer, it will get longer.
• We will use the "tab throbber" loading animation shown on tabs when a page is loading.
• The loading animation will be located in the top left corner of the fixed title bar.
  • The animation will show until both the async extraction attempt and the async fetch of the tracked products list has completed.
  • Consider not showing it until after X ms, in case async processes happen very fast.

[Osmose]

I took the liberty of extracting the minimal CSS for the throbber from the browser myself: https://codepen.io/anon/pen/rZqYOW?editors=1100

[biancadanforth]

Per this comment in #104 , when this animation is showing, it will supercede (i.e. show over) the "Send Feedback" icon.

[Osmose]

* The animation will show until both the async extraction attempt and the async fetch of the tracked products list has completed.

@bryanbell What's the motivation for showing a loading indicator during extraction? Part of #29 will involve attempting extraction earlier in case it succeeds earlier, and re-trying later if it fails. It's unclear to me if we show the loading indicator continuously until the final attempt or if we only show it until the first attempt finishes, pass or fail.

I also wonder about the case where extraction fails; the loading indicator (specifically the one in the header) might deter the user from interacting with the UI until it is finished, and if extraction happens to take a long time, they'll be sitting staring at that indicator for a while.

If the loading indicator is in the header, what do we show in the listing while we're waiting for the product listing to be loaded? Is it just a blank space, or do we only show the title bar with a loading indicator? My preference would be that we show the loading indicator for the state load only, and show it in place of the listing until the listing is ready to be displayed.

[biancadanforth]

I'm going to attempt to answer some of your questions based on the chat I had with Bryan about this a while ago; though ultimately Bryan will need to sign off:

What's the motivation for showing a loading indicator during extraction? Part of #29 will involve attempting extraction earlier in case it succeeds earlier, and re-trying later if it fails. It's unclear to me if we show the loading indicator continuously until the final attempt or if we only show it until the first attempt finishes, pass or fail.

I mentioned to him that extraction was also async, and Javaun has expressed concern that it takes a while for the extraction to complete once he navigates to a page, so it seemed like an indicator for that piece would be helpful too. My assumption here is that we show the loading indicator until we succeed or all attempts fail.

I also wonder about the case where extraction fails; the loading indicator (specifically the one in the header) might deter the user from interacting with the UI until it is finished, and if extraction happens to take a long time, they'll be sitting staring at that indicator for a while.

If extraction fails, the attempt will have been made and null or an empty object returned, in which case we stop showing the loading animation for the extraction piece. I don't have a good answer for your second question here.

If the loading indicator is in the header, what do we show in the listing while we're waiting for the product listing to be loaded? Is it just a blank space, or do we only show the title bar with a loading indicator?

Bryanbell suggested we leave it blank and set it to the minimum height, which is the empty onboarding popup's height.

[Osmose]

Confirmed with @bryanbell via Slack:

• We can change the spec to only show the loading indicator when state is being loaded from extension storage.
• The loading indicator can be shown in the content area of the popup (where the listing/onboarding stuff goes) until the state is loaded, instead of covering the feedback button in the titlebar.