From e82f3e2be90e56e6eb69479fcbe9432fe5a90d2f Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Mon, 27 Nov 2017 21:32:20 -0600
Subject: [PATCH] Make "Loading..." a little nicer with an overlay styled
 element

---
 packages/gallery/src/interface/components/overlay.js | 9 +++++++++
 packages/gallery/src/interface/gallery.js            | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 packages/gallery/src/interface/components/overlay.js

diff --git a/packages/gallery/src/interface/components/overlay.js b/packages/gallery/src/interface/components/overlay.js
new file mode 100644
index 0000000..fd8f102
--- /dev/null
+++ b/packages/gallery/src/interface/components/overlay.js
@@ -0,0 +1,9 @@
+import { styled } from '../../services/style.js';
+
+export const Overlay = styled({
+	alignItems: 'center',
+	flex: 1,
+	flexDirection: 'column',
+	justifyContent: 'center',
+	display: 'flex'
+});
diff --git a/packages/gallery/src/interface/gallery.js b/packages/gallery/src/interface/gallery.js
index bbcf466..18aaa4b 100644
--- a/packages/gallery/src/interface/gallery.js
+++ b/packages/gallery/src/interface/gallery.js
@@ -6,6 +6,7 @@ import { AlbumType } from '../data/album.js';
 import { ThumbnailTemplate } from './thumbnail.js';
 import { AlbumView } from './album.js';
 import { Dropzone } from './components/dropzone.js';
+import { Overlay } from './components/overlay.js';
 import { router, routeChanged } from '../services/router.js';
 import { injectStyle, styled } from '../services/style.js';
 
@@ -81,7 +82,7 @@ export function GalleryView(vm) {
 
 	return function render() {
 		if (!data || !data.ready()) {
-			return el('h1', 'Loading...');
+			return Overlay([el('h1', 'Loading...')]);
 		}
 
 		return el('.gallery', { class: slate }, [