jon/web-dslr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Provide Loading message sooner instead of blank page

Browse Source
This commit is contained in:
Ingvar Stepanyan
2024-12-06 01:07:58 +00:00
parent ca9e5b11e7
commit ec3f4462b1
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/preact/index.html
View File

@@ -67,4 +67,7 @@
href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 110 100"><text y=".9em" font-size="90">📷</text></svg>' href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 110 100"><text y=".9em" font-size="90">📷</text></svg>'
/> />
</head> </head>
<body>
<div class="center">⌛ Loading...</div>
</body>
</html> </html>

12
examples/preact/index.js
View File

@@ -16,7 +16,7 @@
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA * 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 { CaptureButton } from './capture-button.js';
import { Camera, rethrowIfCritical } from 'web-gphoto2'; import { Camera, rethrowIfCritical } from 'web-gphoto2';
import { Preview } from './preview.js'; import { Preview } from './preview.js';
@@ -34,6 +34,9 @@ class App extends Component {
/** @type {Camera | undefined} */ /** @type {Camera | undefined} */
camera; camera;
// Make sure that first render hydrates the existing HTML smoothly.
state = { type: 'Status', message: '⌛ Loading...' };
componentDidMount() { componentDidMount() {
addEventListener('error', ({ message }) => addEventListener('error', ({ message }) =>
this.setState({ this.setState({
@@ -52,7 +55,6 @@ class App extends Component {
); );
// Try to connect to camera at startup. // Try to connect to camera at startup.
// If none is found among saved connections, it will fallback to a picker. // If none is found among saved connections, it will fallback to a picker.
this.setState({ type: 'Status', message: '⌛ Loading...' });
this.tryToConnectToCamera(); this.tryToConnectToCamera();
} }
@@ -130,7 +132,7 @@ class App extends Component {
switch (state.type) { switch (state.type) {
case 'CameraPicker': case 'CameraPicker':
return h( return h(
'div', 'div',
{ {
class: 'center' class: 'center'
}, },
@@ -155,7 +157,7 @@ class App extends Component {
'repo' 'repo'
), ),
'!' '!'
) )
); );
case 'Status': case 'Status':
return h('div', { class: 'center' }, state.message); 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);