Spaces:

cduss
/

webrtc_example

Running

App Files Files Community

cduss commited on May 21

Commit

5a028a4

1 Parent(s): 9969bd5

preload

Browse files

Files changed (1) hide show

index.html +43 -0

index.html CHANGED Viewed

@@ -6,8 +6,51 @@
     <title>Reachy Mini - Pollen Robotics</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <!-- Login View -->

     <title>Reachy Mini - Pollen Robotics</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
+    <!-- Kick off both JS modules during HTML parse so they're in flight
+         before the bottom-of-body <script> executes. The embed entry
+         pulls two hashed chunks of its own which we can't preload
+         (the hashes drift across SDK releases), but front-loading the
+         two top-level modules still shaves ~hundreds of ms off a cold
+         CDN edge. -->
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/gh/pollen-robotics/reachy_mini@v1.7.2/js/reachy-mini.js" crossorigin>
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@pollen-robotics/reachy-mini-sdk@1.7.3-main.b44388c/host/dist/entry/embed.js" crossorigin>
+    <!-- Inline pre-paint script: if we're loaded as an iframe embed,
+         flip the DOM directly to the connected-shell view + a
+         "Connecting…" status pill BEFORE the JS module starts
+         running. Skips the visual flash of the Sign-in button while
+         connectToHost is busy doing its OAuth round-trip + WebRTC
+         handshake (which can be 3-8 s on a cold network). The script
+         runs after </head> only because the elements it touches are
+         in <body>; the cost of moving this script to a `defer="false"`
+         block at the start of <body> is one DOM-ready paint that we
+         already pay for. -->
+    <script>
+        (function () {
+            try {
+                const params = new URLSearchParams(window.location.search);
+                if (params.get('embedded') !== '1') return;
+                // Defer the DOM mutations until after the elements
+                // exist (we're parsed before <body>). DOMContentLoaded
+                // fires once the body is done parsing — cheap, no UX
+                // cost vs. the seconds-long connectToHost.
+                document.addEventListener('DOMContentLoaded', function () {
+                    const login = document.getElementById('loginView');
+                    const main = document.getElementById('mainApp');
+                    const statusText = document.getElementById('statusText');
+                    const statusIndicator = document.getElementById('statusIndicator');
+                    if (login) login.classList.add('hidden');
+                    if (main) main.classList.remove('hidden');
+                    if (statusIndicator) statusIndicator.className = 'status-indicator connecting';
+                    if (statusText) statusText.textContent = 'Connecting…';
+                });
+            } catch (e) {
+                // Best-effort UX polish — never block boot.
+            }
+        })();
+    </script>
 </head>
 <body>
     <!-- Login View -->