Detect and communicate "offline/connecting to swarm" state

> Extracted from https://github.com/ipfs-shipyard/ipfs-share-files/issues/41#issuecomment-442175082

## Problem

>> [..] if you [use js-ipfs fallback and] try to download a file without having connected to a bootstrap node, the UI hangs. When everything is working the download goes to your download folder, as per the browser settings.

> I don't know what a bootstrap node is or how I would connect to it. Is that something that needs to be explained on the download page?

My point was not everyone has fast internet and sometimes it can take up to 10s of seconds before embedded js-ipfs connects to bootstrap/preload nodes.

UI looks "ready" immediately, so user adds files to local node (which is still "offline"), copies URL, shares it and.. nothing happens.

## Solution?

I think we are missing proper UX around communicating what is happening to the user.

This could be a good opportunity to explain that IPFS does not use a centralized service which is fragile and can be easily blocked, but a robust, decentralized network of peers.

There are multiple ways of handling this, below is just an example:

- monitor the number of peers by counting output of `ipfs.swarm.peers`
- if `ipfs.swarm.peers` < 1 indicate "offline mode" / "connecting to swarm, please wait"
- perhaps not accept input from user, make UI (Add button) feel inactive?
- display some kind of "connecting to swarm" splash screen/animation that is both engaging and informative

Does it sound like a good approach? Would love to hear some thoughts on this.

No source files or tests are named. Start by tracing embedded js-ipfs initialization and how the UI can read the peer count from ipfs.swarm.peers. Done should include a defined user-facing connecting or offline state while the node has fewer than one peer, including the proposed behavior for adding files.

Written by the indexing model from the issue text.