Add loading state
This commit is contained in:
parent
769a8c0187
commit
6e192b2f14
|
@ -1,10 +1,14 @@
|
|||
import { toClipboard } from 'https://cdn.jsdelivr.net/npm/copee@1.0.6/dist/copee.mjs';
|
||||
|
||||
const ImagePreview = ({ src, onclick }) => {
|
||||
const ImagePreview = ({ src, onclick, onload, loading }) => {
|
||||
const style = {
|
||||
filter: loading ? 'blur(5px)' : '',
|
||||
opacity: loading ? 0.1 : 1,
|
||||
};
|
||||
return H('a',
|
||||
{ className: 'image-wrapper', href: src, onclick },
|
||||
H('img',
|
||||
{ src }
|
||||
{ src, onload, style }
|
||||
)
|
||||
);
|
||||
}
|
||||
|
@ -86,14 +90,17 @@ const markdownOptions = [
|
|||
];
|
||||
|
||||
const App = (props, state, setState) => {
|
||||
const { fileType = 'png', fontSize = '75px', md = '1', text = '**Hello** World', images=['https://assets.zeit.co/image/upload/front/assets/design/now-black.svg'], showToast = false } = state;
|
||||
const url = new URL(window.location.origin);
|
||||
const { fileType = 'png', fontSize = '75px', md = '1', text = '**Hello** World', images=['https://assets.zeit.co/image/upload/front/assets/design/now-black.svg'], showToast = false, loading = true } = state;
|
||||
const url = new URL(window.location.hostname === 'localhost' ? 'https://og-image.now.sh' : window.location.origin);
|
||||
url.pathname = `${text}.${fileType}`;
|
||||
url.searchParams.append('md', md);
|
||||
url.searchParams.append('fontSize', fontSize);
|
||||
for (let image of images) {
|
||||
url.searchParams.append('images', image);
|
||||
}
|
||||
const setLoadingState = (newState) => {
|
||||
setState({ ...newState, loading: true });
|
||||
};
|
||||
return H('div',
|
||||
{ className: 'split' },
|
||||
H('div',
|
||||
|
@ -101,29 +108,29 @@ const App = (props, state, setState) => {
|
|||
H('div',
|
||||
H(Field, {
|
||||
label: 'File Type',
|
||||
input: H(Dropdown, { options: fileTypeOptions, value: fileType, onchange: val => setState({fileType: val}) })
|
||||
input: H(Dropdown, { options: fileTypeOptions, value: fileType, onchange: val => setLoadingState({fileType: val}) })
|
||||
}),
|
||||
H(Field, {
|
||||
label: 'Font Size',
|
||||
input: H(Dropdown, { options: fontSizeOptions, value: fontSize, onchange: val => setState({fontSize: val}) })
|
||||
input: H(Dropdown, { options: fontSizeOptions, value: fontSize, onchange: val => setLoadingState({fontSize: val}) })
|
||||
}),
|
||||
H(Field, {
|
||||
label: 'Text Type',
|
||||
input: H(Dropdown, { options: markdownOptions, value: md, onchange: val => setState({ md: val }) })
|
||||
input: H(Dropdown, { options: markdownOptions, value: md, onchange: val => setLoadingState({ md: val }) })
|
||||
}),
|
||||
H(Field, {
|
||||
label: 'Text Input',
|
||||
input: H(TextInput, { value: text, onchange: val => setState({ text: val }) })
|
||||
input: H(TextInput, { value: text, onchange: val => setLoadingState({ text: val }) })
|
||||
}),
|
||||
...images.map((image, i) => H(Field, {
|
||||
label: `Image ${i + 1}`,
|
||||
input: H(TextInput, { value: image, onchange: val => { let clone = [...images]; clone[i] = val; setState({ images: clone }) } })
|
||||
input: H(TextInput, { value: image, onchange: val => { let clone = [...images]; clone[i] = val; setLoadingState({ images: clone }) } })
|
||||
})),
|
||||
H(Field, {
|
||||
label: `Image ${images.length + 1}`,
|
||||
input: H(Button, {
|
||||
label: `Add Image ${images.length + 1}`,
|
||||
onclick: () => { setState({ images: [...images, ''] }) }
|
||||
onclick: () => { setLoadingState({ images: [...images, ''] }) }
|
||||
}),
|
||||
}),
|
||||
)
|
||||
|
@ -132,6 +139,8 @@ const App = (props, state, setState) => {
|
|||
{ clasName: 'pull-right' },
|
||||
H(ImagePreview, {
|
||||
src: url.href,
|
||||
loading: loading,
|
||||
onload: e => setState({ loading: false }),
|
||||
onclick: e => {
|
||||
e.preventDefault();
|
||||
const success = toClipboard(url.href);
|
||||
|
|
Loading…
Reference in New Issue