Add preload component (#854)

gui/package.json

@@ -31,6 +31,7 @@
     "react": "^18.0.0",
     "react-dev-utils": "^12.0.0",
     "react-dom": "^18.0.0",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.29.0",
     "react-modal": "3.15.1",
     "react-responsive": "^9.0.2",
@@ -77,6 +78,7 @@
     "@types/file-saver": "^2.0.5",
     "@types/react": "18.0.25",
     "@types/react-dom": "^18.0.5",
+    "@types/react-helmet": "^6.1.6",
     "@types/react-modal": "3.13.1",
     "@types/three": "^0.148.0",
     "@typescript-eslint/eslint-plugin": "^5.60.1",

gui/src/App.tsx

@@ -52,6 +52,7 @@ import { VRModePage } from './components/vr-mode/VRModePage';
 import { InterfaceSettings } from './components/settings/pages/InterfaceSettings';
 import { error, log } from './utils/logging';
 import { AppLayout } from './AppLayout';
+import { Preload } from './components/Preload';
 
 export const GH_REPO = 'SlimeVR/SlimeVR-Server';
 export const VersionContext = createContext('');
@@ -252,6 +253,7 @@ export default function App() {
               <StatusProvider>
                 <VersionContext.Provider value={updateFound}>
                   <div className="h-full w-full text-standard bg-background-80 text-background-10">
+                    <Preload />
                     <div className="flex-col h-full">
                       {!websocketAPI.isConnected && (
                         <>

gui/src/components/Preload.tsx

@@ -0,0 +1,48 @@
+import { Helmet } from 'react-helmet';
+export function Preload() {
+  return (
+    <Helmet>
+      <link rel="preload" href="/images/front-standing-pose.webp" as="image" />
+      <link rel="preload" href="/images/slime-girl.webp" as="image" />
+      <link rel="preload" href="/images/mounting-reset-pose.webp" as="image" />
+      <link rel="preload" href="/images/reset-pose.webp" as="image" />
+      <link rel="preload" href="/images/slimes.webp" as="image" />
+
+      <link
+        rel="preload"
+        href="/sounds/quick-reset-started-sound.mp3"
+        as="audio"
+      />
+      <link
+        rel="preload"
+        href="/sounds/full-reset-started-sound.mp3"
+        as="audio"
+      />
+      <link
+        rel="preload"
+        href="/sounds/mounting-reset-started-sound.mp3"
+        as="audio"
+      />
+      <link rel="preload" href="/sounds/first-tap.mp3" as="audio" />
+      <link rel="preload" href="/sounds/second-tap.mp3" as="audio" />
+      <link rel="preload" href="/sounds/third-tap.mp3" as="audio" />
+      <link rel="preload" href="/sounds/fourth-tap.mp3" as="audio" />
+      <link rel="preload" href="/sounds/fifth-tap.mp3" as="audio" />
+      <link rel="preload" href="/sounds/end-tap.mp3" as="audio" />
+      <link rel="preload" href="/sounds/tapextrasetup.mp3" as="audio" />
+
+      <link
+        rel="preload"
+        href="/models/tracker.gltf"
+        as="fetch"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="/models/extension.gltf"
+        as="fetch"
+        crossOrigin="anonymous"
+      />
+    </Helmet>
+  );
+}

gui/src/sounds/sounds.tsx

@@ -15,24 +15,6 @@ const tapSetupSound5 = new Audio('/sounds/fifth-tap.mp3');
 const tapSetupSoundEnd = new Audio('/sounds/end-tap.mp3');
 const tapSetupExtraSound = new Audio('/sounds/tapextrasetup.mp3');
 
-const sounds = [
-  quickResetStartedSound,
-  fullResetStartedSound,
-  mountingResetStartedSound,
-  tapSetupSound1,
-  tapSetupSound2,
-  tapSetupSound3,
-  tapSetupSound4,
-  tapSetupSound5,
-  tapSetupSoundEnd,
-  tapSetupExtraSound,
-];
-
-sounds.forEach((s) => {
-  s.play();
-  setTimeout(() => s.pause(), 10);
-});
-
 function restartAndPlay(audio: HTMLAudioElement, volume: number) {
   audio.volume = Math.min(1, Math.pow(volume, Math.E) + 0.05);
   if (audio.paused) {