From ec3f4462b1f4c58ecb0e9411bbddb2ab8a5ccea8 Mon Sep 17 00:00:00 2001 From: Ingvar Stepanyan Date: Fri, 6 Dec 2024 01:07:58 +0000 Subject: [PATCH] Provide Loading message sooner instead of blank page --- examples/preact/index.html | 3 +++ examples/preact/index.js | 12 +++++++----- 2 files changed, 10 insertions(+), 5 deletions(-) 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);