diff --git a/examples/preact/index.html b/examples/preact/index.html index 41512e2..9ce0eee 100644 --- a/examples/preact/index.html +++ b/examples/preact/index.html @@ -67,4 +67,7 @@ href='data:image/svg+xml,📷' /> + +
⌛ Loading...
+ diff --git a/examples/preact/index.js b/examples/preact/index.js index 0b94c21..6e0cd9f 100644 --- a/examples/preact/index.js +++ b/examples/preact/index.js @@ -16,7 +16,7 @@ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA */ -import { h, render, Component } from 'preact'; +import { h, hydrate, Component } from 'preact'; import { CaptureButton } from './capture-button.js'; import { Camera, rethrowIfCritical } from 'web-gphoto2'; import { Preview } from './preview.js'; @@ -34,6 +34,9 @@ class App extends Component { /** @type {Camera | undefined} */ camera; + // Make sure that first render hydrates the existing HTML smoothly. + state = { type: 'Status', message: '⌛ Loading...' }; + componentDidMount() { addEventListener('error', ({ message }) => this.setState({ @@ -52,7 +55,6 @@ class App extends Component { ); // Try to connect to camera at startup. // If none is found among saved connections, it will fallback to a picker. - this.setState({ type: 'Status', message: '⌛ Loading...' }); this.tryToConnectToCamera(); } @@ -130,7 +132,7 @@ class App extends Component { switch (state.type) { case 'CameraPicker': return h( - 'div', + 'div', { class: 'center' }, @@ -155,7 +157,7 @@ class App extends Component { 'repo' ), '!' - ) + ) ); case 'Status': return h('div', { class: 'center' }, state.message); @@ -201,4 +203,4 @@ class App extends Component { } } -render(h(App, null), document.body); +hydrate(h(App, null), document.body);