Client: Add loading screen for apps

[onbjerg]

Some apps might take a while to load; we should probably have a loading screen.

[luisivan]

I'd implement a small http://ricostacruz.com/nprogress/ kind of thing

[sohkai]

Looking into this, getting an accurate progress bar is going to be difficult.

For now we can just fudge everything, but it might be a nice touch in the future if everything aligns 😄.

---

js-ipfs-api doesn't support a progress callback on ipfs.files.get() or ipfs.files.cat(), so an alternative could be to:

1. Do an ipfs.ls() to find out the file sizes of the index.html, manifest.json, and the background script, if any,
2. Increment the progress bar as each gets downloaded,
3. Allow a ~25% fudge factor for any other scripts the index.html needs, and add that as the iframe loading index.js fires its load event (or a "ready" event via postMessage(), given that we can't be 100% sure the iframe's ready to accept messages until it fires its own message).

The above assumes that we can data URI encode a blob and use that as the iframe's source, but this still looks flaky in browsers. We can skip that by just setting the iframe's src to point to an ipfs gateway URL for the index.html and adjust the fudge factor.

[onbjerg]

We're not going to use those calls anyway; we'll load the file via HTTP directly from an IPFS node, so we need to hook into a progress event on the iframe, if possible :)

[sohkai]

There's really only one progress event on the iframe, which is when everything on the page is loaded (including all images, scripts, etc), hence the fudging needed. Are we going to be loading the background script via HTTP directly too?

[onbjerg]

No but the background script should always run, so I don't think we need a loading screen for that.

Kinda sad for iframes, not really sure what to do about that right now, I'll investigate tomorrow 😊