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>'
/>
</head>
<body>
<div class="center">⌛ Loading...</div>
</body>
</html>

12
examples/preact/index.js
View File

@@ -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);