Provide Loading message sooner instead of blank page

GoogleChromeLabs · Dec 6, 2024 · ec3f446 · ec3f446
1 parent ca9e5b1
commit ec3f446
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/examples/preact/index.html b/examples/preact/index.html
@@ -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>
diff --git 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);
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>