Make "Loading..." a little nicer with an overlay styled element

This commit is contained in:
Timothy Farrell 2017-11-27 21:32:20 -06:00
parent f717eb5977
commit abcd5c58c5
2 changed files with 11 additions and 1 deletions

View File

@ -0,0 +1,9 @@
import { styled } from '../../services/style.js';
export const Overlay = styled({
alignItems: 'center',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
display: 'flex'
});

View File

@ -6,6 +6,7 @@ import { AlbumType } from '../data/album.js';
import { ThumbnailTemplate } from './thumbnail.js'; import { ThumbnailTemplate } from './thumbnail.js';
import { AlbumView } from './album.js'; import { AlbumView } from './album.js';
import { Dropzone } from './components/dropzone.js'; import { Dropzone } from './components/dropzone.js';
import { Overlay } from './components/overlay.js';
import { router, routeChanged } from '../services/router.js'; import { router, routeChanged } from '../services/router.js';
import { injectStyle, styled } from '../services/style.js'; import { injectStyle, styled } from '../services/style.js';
@ -81,7 +82,7 @@ export function GalleryView(vm) {
return function render() { return function render() {
if (!data || !data.ready()) { if (!data || !data.ready()) {
return el('h1', 'Loading...'); return Overlay([el('h1', 'Loading...')]);
} }
return el('.gallery', { class: slate }, [ return el('.gallery', { class: slate }, [