add styles to "loading..." elements

src/components/Layout.tsx

@@ -34,14 +34,6 @@ export default function(ownProps: any) {
     }
   }, shallowEqual);
 
-  if (props.error) {
-    return <>Error: {props.error}</>;
-  }
-
-  if (!props.initialized) {
-    return <>initializing...</>;
-  }
-
   const sidebarClass = classNames({
     sidebar: true,
     open: props.sidebarOpen,
@@ -56,8 +48,17 @@ export default function(ownProps: any) {
         Web3 Type: {web3Type(props.type)} <br />
       </div>
     </div>
-    <div className="content">
+
+    {props.error && <div className={classNames({ paper: true, error: true })}>
+      {props.error}
+    </div>}
+
+    {!props.initialized && <div className={classNames({ paper: true })}>
+      initializing...
+    </div>}
+
+    {!props.error && props.initialized && <div className="content">
       {ownProps.children}
-    </div>
+    </div>}
   </div>;
 }

src/components/Redeemable.tsx

@@ -109,15 +109,21 @@ export default function(ownProps: any) {
   }, [dispatch, bucketAddress, recipientAddress]);
 
   if (props.error) {
-    return <>Error: {buckerErrorMessage(props.error)}</>;
+    return <div className={classNames({ paper: true, error: true })}>
+      {buckerErrorMessage(props.error)}
+    </div>;
   }
 
   if (props.loading) {
-    return <>loading bucket...</>;
+    return <div className={classNames({ paper: true })}>
+      loading bucket...
+    </div>;
   }
 
   if (props.token === undefined) {
-    return <>loading token info...</>;
+    return <div className={classNames({ paper: true })}>
+      loading token info...
+    </div>;
   }
 
   const erc20Header = (token: TokenERC20) => {

src/styles/Layout.scss

@@ -65,4 +65,18 @@ body {
 
 .main {
   margin-top: 50px;
+
+  .paper {
+    margin: 0 auto;
+    padding: 12px;
+    background: #fff;
+    color: #1a1a1a;
+    width: 400px;
+    border-radius: 4px;
+    text-align: center;
+
+    &.error {
+      color: red;
+    }
+  }
 }