Add loading screen to badge veiwer screen

[deadlyfingers]

Prevent FOC of Submit button by adding preloader to badge viewer.

[deadlyfingers]

Also we need to check if loading fails then show error message and ensure any UI buttons like Submit are hidden.

[vjrantal]

When developing this feature, a diff like below is useful to emulate an error scenario and also a success scenario where the loading takes a bit longer.

$ git diff
diff --git a/server/routes/api.js b/server/routes/api.js
index 20656de..d51e8a3 100644
--- a/server/routes/api.js
+++ b/server/routes/api.js
@@ -49,14 +49,16 @@ var filterBadge = function (badge) {
 };

 router.get('/user', function (req, res) {
-  if (!req.user) {
-    return sendUnauthorized(res);
-  }
-  res.json({
-    name: req.user.name,
-    imageUrl: req.user.imageUrl,
-    role: req.user.role
-  });
+  setTimeout(function () {
+    if (true) { // Change this to false when testing success case
+      return sendUnauthorized(res);
+    }
+    res.json({
+      name: req.user.name,
+      imageUrl: req.user.imageUrl,
+      role: req.user.role
+    });
+  }, 2000);
 });

I think a good solution would be a "badge splash screen" that is visible during the loading phase and that shows an error if loading fails. I think one generic error like "Something went wrong - please try again." might be enough since in the end, once everything works perfectly, users shouldn't get this error at this point.