Make "Loading..." a little nicer with an overlay styled element
This commit is contained in:
parent
a3b4ea2920
commit
e82f3e2be9
9
packages/gallery/src/interface/components/overlay.js
Normal file
9
packages/gallery/src/interface/components/overlay.js
Normal 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'
|
||||||
|
});
|
||||||
@ -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 }, [
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user