style(bootstrap): Make loading indicator pretty

[ghost]

Screenshot

[ghost]

My greatest work.

[ghost]

Yeah, <app> is deprecated. I was advocating for <main> but it sounds like that conflicts with LinkedUp somehow... I'm going to follow up in a separate PR.

[ghost]

Got a test failing for some reason.

[ghost]

not ok 10 dfx start serves a frontend
# (from function `assert_command' in file /nix/store/67fkrbqi4ns58gy8ragv13jlky55wb8s-e2e/utils/assertions.bash, line 23,
#  in test file /nix/store/67fkrbqi4ns58gy8ragv13jlky55wb8s-e2e/frontend.bash, line 24)
#   `assert_command curl http://localhost:8000 # 8000 = default port.' failed
# Fetching manifest https://sdk.dfinity.org/manifest.json
# You seem to be running an outdated version of dfx.
# 
# Current version: 0.4.11
# You are strongly encouraged to upgrade by running 'dfx upgrade'!
# Creating new project "e2e_project"...
# CREATE       e2e_project/dfx.json (321B)...
# CREATE       e2e_project/README.md (1.01KB)...
# CREATE       e2e_project/src/e2e_project/main.mo (107B)...
# CREATE       e2e_project/.gitignore (189B)...
# CREATE       e2e_project/package.json (251B)...
# CREATE       e2e_project/src/e2e_project/public/index.js (155B)...
# CREATE       e2e_project/webpack.config.js (1.76KB)...
# npm ERR! code ENOTFOUND
# npm ERR! errno ENOTFOUND
# npm ERR! network request to https://registry.npmjs.org/webpack failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
# npm ERR! network This is a problem related to network connectivity.
# npm ERR! network In most cases you are behind a proxy or have bad network settings.
# npm ERR! network 
# npm ERR! network If you are behind a proxy, please make sure that the
# npm ERR! network 'proxy' config is set properly.  See: 'npm help config'
# 
# npm ERR! A complete log of this run can be found in:
# npm ERR!     /build/dfx-e2e-home-pZdT/.npm/_logs/2020-01-10T17_07_54_859Z-debug.log

[eftychis]

@stanleygjones This passes now.

Please check as I resolved conflicts/modified.

[hansl]

create-react-app uses <div id="root"></div>. We could use id="app" or id="main".

I think it's a better idea to steer away from custom tags.

[hansl]

@stanleygjones Could we "DFINITY"vely decide on what the main DOM element is? I have time to discuss or could be during our standiup.

[eftychis]

reping on this @stanleygjones @hansl

[ggreif]

Well, in #324 I simply reference document.body.firstElementChild.