Make initial frame content useful

[dracos]

If the JavaScript does not run for whatever reason, provide a link so that the set side emails can still be seen.

(I wondered also whether to include a reference to the before-visit event that could be used as a hook to show the spinner, but wasn't sure.)

[netlify]

Deploy preview for gifted-meitner-072014 ready!

Built with commit 473b1df

https://deploy-preview-12--gifted-meitner-072014.netlify.app

[seanpdoyle]

How do you feel about declaring both, with the Set aside link wrapped in a <noscript> element?

[dracos]

The spinner could be confusing if it is shown and the JavaScript does not run for whatever reason, and the user waits and thinks something is happening when it is not, so I think it would be best if the spinner was only shown if the relevant JavaScript is running. Similarly, JavaScript might be enabled (so noscript would not be shown) but something goes wrong loading/running the JavaScript, and then the user has no way to proceed, so I don't think wrapping it in noscript is the best way to proceed.

But yes, the spinner could be present initially in the HTML if you had, I dunno e.g.

<img class="fetch-show" src="/icons/spinner.gif">
<a class="fetch-hide" href="/emails/set_aside">Set aside emails</a>

with some CSS like

.fetch-show { display: none; }

and then the JS that kicks off the fetch / some event handler at that point / whatever shows #set_aside_tray .fetch-show and hides #set_aside_tray .fetch-hide – and then if something goes wrong fetching the page it can revert back to showing the link easily enough, which would also be a good thing, more robust and resilient.
Hope that's helpful.

PS I realise this is only an early example in the documentation, but I really do think it's worthwhile to have something robust like this in such an example, because it might well be used as a template in many implementations. And going by the past N years of much web development I don't want people to start using the good ideas of this but still make something that is a bunch of non-working spinners :)