Only load reaction sound effects if enabled.

src/room/ReactionAudioRenderer.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useDeferredValue, useEffect } from "react";
+import { ReactNode, useDeferredValue, useEffect, useState } from "react";
 
 import { useReactions } from "../useReactions";
 import { playReactionsSound, useSetting } from "../settings/settings";
@@ -21,17 +21,25 @@ const SoundMap = Object.fromEntries([
   [GenericReaction.name, GenericReaction.sound],
 ]);
 
-const Sounds = prefetchSounds(SoundMap);
+let SoundCache: ReturnType<typeof prefetchSounds> | null = null;
 
 export function ReactionsAudioRenderer(): ReactNode {
   const { reactions } = useReactions();
   const [shouldPlay] = useSetting(playReactionsSound);
+  const [soundCache, setSoundCache] = useState(SoundCache);
   const audioEngineCtx = useAudioContext({
-    sounds: Sounds,
+    sounds: soundCache,
     latencyHint: "interactive",
   });
   const audioEngineRef = useLatest(audioEngineCtx);
   const oldReactions = useDeferredValue(reactions);
+  useEffect(() => {
+    if (!shouldPlay || SoundCache) {
+      return;
+    }
+    SoundCache = prefetchSounds(SoundMap);
+    setSoundCache(SoundCache);
+  }, [shouldPlay]);
 
   useEffect(() => {
     if (!shouldPlay || !audioEngineRef.current) {

src/settings/SettingsModal.tsx

@@ -86,9 +86,6 @@ export const SettingsModal: FC<Props> = ({
   const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
   const [soundVolumeRaw, setSoundVolumeRaw] = useState(soundVolume);
 
-  // Debounce saving the sound volume as it triggers certain components to reload.
-  useEffect(() => {});
-
   const audioTab: Tab<SettingsTab> = {
     key: "audio",
     name: t("common.audio"),