CSS tweaks

public/styles/shared.css

@@ -94,6 +94,7 @@ footer {
 	padding-bottom: .5rem;
 }
 
+/* components */
 .page {
 	flex: 1 1 auto;
 	display: flex;
@@ -108,6 +109,44 @@ footer {
 	justify-content: flex-start;
 }
 
+/* right-aligned panels */
+.panel.right {
+	align-items: center;
+}
+
+.panel.right form {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	align-self: stretch;
+}
+
+.panel.right form button {
+	align-self: stretch;
+	margin-top: .2em;
+	margin-bottom: .2em;
+}
+
+@media screen and (max-width: 480px) {
+	.panel.right h1 {
+		font-size: 16px;
+	}
+}
+
+/* constrained panels */
+.constrained {
+	align-self: center;
+	max-width: 320px;
+}
+
+@media screen and (max-width: 480px) {
+	.constrained {
+		align-self: stretch;
+		max-width: none;
+	}
+}
+
 /* warning message */
 .warning {
 	flex: 0 1 auto;
@@ -121,6 +160,10 @@ footer {
 	background: #ff6666;
 }
 
+.panel.right .warning {
+	align-self: stretch;
+}
+
 /* custom styling */
 
 /* SidePanelPage structure */
@@ -155,46 +198,6 @@ footer {
 	}
 }
 
-.panel.right {
-	align-items: center;
-}
-
-.panel.right .warning {
-	align-self: stretch;
-}
-
-.panel.right form {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-end;
-	align-self: stretch;
-}
-
-.panel.right form button {
-	align-self: stretch;
-	margin-top: .2em;
-	margin-bottom: .2em;
-}
-
-@media screen and (max-width: 480px) {
-	.panel.right h1 {
-		font-size: 16px;
-	}
-}
-
-.constrained {
-	align-self: center;
-	max-width: 320px;
-}
-
-@media screen and (max-width: 480px) {
-	.constrained {
-		align-self: stretch;
-		max-width: none;
-	}
-}
-
 /* main panel */
 .mainPanel {
 	margin-left: 30px;

src/components/app.jsx

@@ -9,7 +9,7 @@ import Footer from './panels/footer.jsx';
 const LazyRoute = (props) => {
 	const component = Loadable({
 		loader: props.component,
-		loading: () => <div>Loading...</div>,
+		loading: () => <div className='page'><p className='centered'>Loading...</p></div>,
 	});
 
 	return <Route {...props} component={component} />;